/* undersight Design Tokens — generated from DESIGN.md */
/* Keep in sync with DESIGN.md and tokens.json */

/* ========================================================================
   1. COLOR TOKENS — Primitive palette
   ======================================================================== */

:root {
  /* Primary palette */
  --color-graphite-900: #23262C;
  --color-graphite-800: #2E3138;
  --color-graphite-700: #3A3F47;
  --color-graphite-100: #F0F1F2;
  --color-graphite-50: #F7F8F8;
  --color-graphite-500: #6B7280;
  --color-cloud-zinc: #D1D5DB;
  --color-cloud-zinc-light: #E8EAED;
  --color-amber-rust: #C97A54;
  --color-amber-rust-hover: #B56A45;
  --color-amber-rust-light: rgba(201, 122, 84, 0.08);
  --color-amber-rust-focus: rgba(201, 122, 84, 0.2);
  --color-eucalyptus: #6B9E8C;
  --color-eucalyptus-light: rgba(107, 158, 140, 0.1);
  --color-paper-white: #FFFFFF;
  --color-bg-surface: #FAFAFA;
  --color-on-accent: #FFFFFF;
  --color-error: #D05454;
  --color-info: #5B8DEF;

  /* Dark mode primitives (referenced by dark override block) */
  --color-dark-bg: #1A1D21;
  --color-dark-surface: #23262C;
  --color-dark-elevated: #3A3F47;
  --color-dark-text: #FFFFFF;
  --color-dark-text-muted: #D1D5DB;
  --color-dark-border: rgba(255, 255, 255, 0.1);

  /* ========================================================================
     2. SEMANTIC COLOR ALIASES — Light mode (default)
     ======================================================================== */

  --color-bg: var(--color-paper-white);
  --color-bg-alt: var(--color-bg-surface);
  --color-bg-subtle: var(--color-graphite-50);
  --color-bg-muted: var(--color-graphite-100);

  --color-text: var(--color-graphite-900);
  --color-text-secondary: var(--color-graphite-700);
  --color-text-muted: var(--color-graphite-500);
  --color-text-hover: var(--color-graphite-800);

  --color-accent: var(--color-amber-rust);
  --color-accent-hover: var(--color-amber-rust-hover);
  --color-accent-light: var(--color-amber-rust-light);
  --color-accent-focus: var(--color-amber-rust-focus);
  --color-accent-text: var(--color-on-accent);

  --color-border: var(--color-cloud-zinc);
  --color-border-light: var(--color-cloud-zinc-light);

  --color-success: var(--color-eucalyptus);
  --color-success-light: var(--color-eucalyptus-light);

  --color-surface: var(--color-paper-white);
  --color-surface-elevated: var(--color-paper-white);

  /* ========================================================================
     4. TYPOGRAPHY TOKENS
     ======================================================================== */

  /* Font families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* OpenType features (Inter) */
  --font-feature-inter: 'cv01', 'ss03';

  /* Font sizes */
  --text-display-xl: 48px;
  --text-display-lg: 36px;
  --text-display-md: 28px;
  --text-display-sm: 24px;
  --text-title-lg: 20px;
  --text-title-md: 18px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-ui-label: 14px;
  --text-ui-button: 14px;
  --text-nav-link: 14px;
  --text-caption: 13px;
  --text-caption-uppercase: 11px;
  --text-data-display: 18px;
  --text-code: 14px;

  /* Font weights */
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-ui: 510;
  --weight-medium: 500;
  --weight-regular: 400;

  /* Line heights */
  --leading-display-xl: 1.1;
  --leading-display-lg: 1.15;
  --leading-display-md: 1.2;
  --leading-display-sm: 1.25;
  --leading-title-lg: 1.3;
  --leading-title-md: 1.4;
  --leading-body-lg: 1.6;
  --leading-body-md: 1.75;
  --leading-body-sm: 1.5;
  --leading-ui-label: 1;
  --leading-ui-button: 1;
  --leading-nav-link: 1.4;
  --leading-caption: 1.4;
  --leading-caption-uppercase: 1.4;
  --leading-data-display: 1;
  --leading-code: 1.6;

  /* Letter spacing */
  --tracking-display-xl: -0.03em;
  --tracking-display-lg: -0.02em;
  --tracking-display-md: -0.02em;
  --tracking-display-sm: -0.01em;
  --tracking-title-lg: 0;
  --tracking-title-md: 0;
  --tracking-body-lg: 0;
  --tracking-body-md: 0;
  --tracking-body-sm: 0;
  --tracking-ui-label: 0.02em;
  --tracking-ui-button: 0;
  --tracking-nav-link: 0;
  --tracking-caption: 0;
  --tracking-caption-uppercase: 0.08em;
  --tracking-data-display: -0.02em;
  --tracking-code: 0;

  /* ========================================================================
     5. SPACING TOKENS
     ======================================================================== */

  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-section: 80px;
  --space-section-mobile: 48px;

  /* ========================================================================
     6. BORDER RADIUS TOKENS
     ======================================================================== */

  --rounded-xs: 4px;
  --rounded-sm: 6px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-pill: 9999px;

  /* ========================================================================
     7. SHADOW TOKENS — 3 elevation levels
     ======================================================================== */

  /* Level 0: flat — no shadow (cards use borders instead) */
  --shadow-subtle: 0 1px 3px rgba(35, 38, 44, 0.06);
  --shadow-medium: 0 4px 16px rgba(35, 38, 44, 0.08);
  --shadow-large: 0 8px 32px rgba(35, 38, 44, 0.12);

  /* ========================================================================
     8. TRANSITION TOKENS
     ======================================================================== */

  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-default: ease;

  /* ========================================================================
     9. Z-INDEX TOKENS
     ======================================================================== */

  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 300;

  /* ========================================================================
     10. LAYOUT TOKENS
     ======================================================================== */

  --max-width: 1120px;
  --nav-height: 64px;
}

/* ==========================================================================
   3. DARK MODE OVERRIDES — Semantic alias swap
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-dark-bg);
    --color-bg-alt: var(--color-dark-surface);
    --color-bg-subtle: var(--color-dark-surface);
    --color-bg-muted: var(--color-dark-elevated);

    --color-text: var(--color-dark-text);
    --color-text-secondary: var(--color-dark-text-muted);
    --color-text-muted: rgba(255, 255, 255, 0.45);
    --color-text-hover: var(--color-dark-text);

    --color-border: var(--color-dark-border);
    --color-border-light: var(--color-dark-border);

    --color-surface: var(--color-dark-surface);
    --color-surface-elevated: var(--color-dark-elevated);

    /* Accent colors remain unchanged in dark mode */
    /* --color-accent: var(--color-amber-rust); */
    /* --color-accent-hover: var(--color-amber-rust-hover); */

    /* Shadows deepen in dark mode */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
}

/* Manual dark mode override (add class="theme-dark" to <html>) */
html.theme-dark {
  --color-bg: var(--color-dark-bg);
  --color-bg-alt: var(--color-dark-surface);
  --color-bg-subtle: var(--color-dark-surface);
  --color-bg-muted: var(--color-dark-elevated);
  --color-text: var(--color-dark-text);
  --color-text-secondary: var(--color-dark-text-muted);
  --color-text-muted: rgba(255, 255, 255, 0.45);
  --color-text-hover: var(--color-dark-text);
  --color-border: var(--color-dark-border);
  --color-border-light: var(--color-dark-border);
  --color-surface: var(--color-dark-surface);
  --color-surface-elevated: var(--color-dark-elevated);
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Manual light mode override (add class="theme-light" to <html>) */
html.theme-light {
  --color-bg: var(--color-paper-white);
  --color-bg-alt: var(--color-bg-surface);
  --color-bg-subtle: var(--color-graphite-50);
  --color-bg-muted: var(--color-graphite-100);
  --color-text: var(--color-graphite-900);
  --color-text-secondary: var(--color-graphite-700);
  --color-text-muted: var(--color-graphite-500);
  --color-text-hover: var(--color-graphite-800);
  --color-border: var(--color-cloud-zinc);
  --color-border-light: var(--color-cloud-zinc-light);
  --color-surface: var(--color-paper-white);
  --color-surface-elevated: var(--color-paper-white);
  --shadow-subtle: 0 1px 3px rgba(35, 38, 44, 0.06);
  --shadow-medium: 0 4px 16px rgba(35, 38, 44, 0.08);
  --shadow-large: 0 8px 32px rgba(35, 38, 44, 0.12);
}