/**
 * TYPOGRAPHY: Geist Font Family
 * Open-sourced by Vercel - https://vercel.com/font
 */

@font-face {
  font-family: 'Geist';
  src: url('https://assets.vercel.com/raw/upload/v1716329448/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('https://assets.vercel.com/raw/upload/v1716329449/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('https://assets.vercel.com/raw/upload/v1716329450/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('https://assets.vercel.com/raw/upload/v1716329451/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-variant-numeric: tabular-nums;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('https://assets.vercel.com/raw/upload/v1716329452/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  font-variant-numeric: tabular-nums;
}

/**
 * DESIGN SYSTEM: OBSIDIAN
 * 
 * Cold precision carved from volcanic glass. Linear's surgical restraint
 * meets Raycast's compact density. Surfaces feel machined, not painted.
 * 
 * STANDARDS:
 * - All shadows chromatic (blue-tinted, never pure black)
 * - Tabular figures on all numbers
 * - WCAG AA minimum (AAA where possible)
 * - 8px vertical rhythm (deliberate spacing)
 * - Sharp radius philosophy (0px data, 6px UI, 10px cards)
 */

:root {
  /* === SURFACE DEPTH (Blue-Shifted Charcoal) === */
  --void: hsl(222, 15%, 8%);        /* Base background */
  --substrate: hsl(222, 14%, 11%);  /* Hero, major containers */
  --surface: hsl(222, 13%, 14%);    /* Default card level */
  --raised: hsl(222, 12%, 17%);     /* Hover state */
  --elevated: hsl(222, 11%, 20%);   /* Popovers (future) */
  --seam: hsl(222, 12%, 24%);       /* Borders */
  
  /* === CHROMATIC ACCENTS (Restrained) === */
  --accent-primary: hsl(212, 100%, 52%);   /* Electric blue - active only */
  --accent-success: hsl(158, 64%, 52%);    /* Muted emerald */
  --accent-warning: hsl(43, 86%, 58%);     /* Soft amber */
  --accent-error: hsl(4, 90%, 58%);        /* Subdued red */
  
  /* === TEXT HIERARCHY (WCAG AA+) === */
  --text-primary: hsl(0, 0%, 95%);      /* AAA on void */
  --text-secondary: hsl(222, 10%, 62%); /* AA on void */
  --text-tertiary: hsl(222, 8%, 48%);   /* AA on void */
  --text-inverse: hsl(222, 15%, 8%);    /* For light surfaces */
  
  /* === SPACING (8px base - deliberate rhythm) === */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  
  /* === TYPE SCALE (1.2 Perfect Fourth) === */
  --text-3xs: 0.625rem;   /* 10px - micro badges */
  --text-2xs: 0.6875rem;  /* 11px - captions */
  --text-xs: 0.75rem;     /* 12px - small UI */
  --text-sm: 0.8125rem;   /* 13px - body small */
  --text-base: 0.9375rem; /* 15px - body default */
  --text-lg: 1.125rem;    /* 18px - card titles */
  --text-xl: 1.375rem;    /* 22px - section headers */
  --text-2xl: 1.625rem;   /* 26px - page titles */
  --text-3xl: 1.9375rem;  /* 31px - hero */
  
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  
  --leading-tight: 1.25;
  --leading-base: 1.5;
  --leading-relaxed: 1.65;
  
  /* === RADIUS (Sharp Precision) === */
  --radius-none: 0;       /* Data surfaces */
  --radius-sm: 6px;       /* Interactive UI */
  --radius-md: 10px;      /* Cards */
  --radius-lg: 12px;      /* Containers */
  
  /* === SHADOWS (Chromatic Only) === */
  --shadow-card-rest: 0 2px 8px hsl(222 15% 6% / 0.5);
  --shadow-card-hover: 0 4px 16px hsl(212 100% 52% / 0.08);
  --shadow-glow-active: 0 0 0 1px hsl(212 100% 52% / 0.3) inset;
  --shadow-text-icon: 0 2px 6px hsl(212 100% 52% / 0.25);
  
  /* === MOTION (Surgical Restraint) === */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;
  
  /* Framer's "ease out" curve */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.15, 1);
  
  /* === Z-INDEX === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
}

/* === FONT LOADING === */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap');

/* === GLOBAL RESETS === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-base);
  color: var(--text-primary);
  background: var(--void);
}

/* === TABULAR FIGURES (All Numbers) === */
.mono,
.metric-value,
.app-status,
[data-numeric="true"] {
  font-family: 'Geist Mono', 'SF Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* === UTILITY CLASSES === */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.accent-primary { color: var(--accent-primary); }
.accent-success { color: var(--accent-success); }
.accent-warning { color: var(--accent-warning); }

.surface { background: var(--surface); }
.substrate { background: var(--substrate); }
.raised { background: var(--raised); }