/* ==========================================================================
   SMK Web Design — Premium Design Tokens v2.0
   Editorial luxury × technical precision
   ========================================================================== */

:root {
  /* ——— Color: Ink Surfaces (Dark Theme Primary) ——— */
  --ink-950: #030304;
  --ink-900: #0A0A0B;
  --ink-800: #111113;
  --ink-700: #1A1A1C;
  --ink-600: #232326;
  --ink-500: #2D2D30;
  --ink-400: #3A3A3D;
  --ink-300: #4E4E52;
  --ink-200: #6B6B70;
  --ink-100: #8A8A8F;

  /* ——— Color: Surface Elevation ——— */
  --surface-ground: var(--ink-900);
  --surface-base: var(--ink-800);
  --surface-raised: var(--ink-700);
  --surface-overlay: var(--ink-600);
  --surface-hover: var(--ink-500);
  --surface-active: var(--ink-400);

  /* ——— Color: Borders & Dividers ——— */
  --border-subtle: rgba(245, 245, 240, 0.04);
  --border-default: rgba(245, 245, 240, 0.08);
  --border-strong: rgba(245, 245, 240, 0.14);
  --border-focus: var(--signal);
  --border-glass: rgba(245, 245, 240, 0.06);

  /* ——— Color: Text Hierarchy ——— */
  --text-inverse: #0A0A0B;
  --text-base: #F5F5F0;
  --text-muted: #A09E98;
  --text-subtle: #6B6965;
  --text-disabled: #3D3C3A;
  --text-on-signal: #0A0A0B;

  /* ——— Color: Accent Palette ——— */
  --signal: #C8FF00;
  --signal-dim: rgba(200, 255, 0, 0.12);
  --signal-glow: rgba(200, 255, 0, 0.18);
  --signal-strong: rgba(200, 255, 0, 0.35);

  --horizon: #FF6B4A;
  --horizon-dim: rgba(255, 107, 74, 0.12);
  --horizon-glow: rgba(255, 107, 74, 0.18);

  --depth: #2D4AFF;
  --depth-dim: rgba(45, 74, 255, 0.12);
  --depth-glow: rgba(45, 74, 255, 0.18);

  --calm: #4ADE80;
  --calm-dim: rgba(74, 222, 128, 0.12);
  --calm-glow: rgba(74, 222, 128, 0.18);

  --glow: #FFD93D;

  /* ——— Color: Semantic Aliases (Legacy Support) ——— */
  --black: var(--ink-950);
  --black-soft: var(--surface-base);
  --black-medium: var(--surface-raised);
  --black-light: var(--surface-hover);
  --white: var(--text-base);
  --white-dim: #D8D6D0;
  --white-muted: var(--text-muted);
  --white-ghost: var(--text-subtle);
  --accent: var(--signal);
  --accent-light: #D4FF33;
  --accent-glow: var(--signal-dim);

  /* Legacy naming — maps old tokens to new system */
  --mist: var(--text-base);
  --fog: var(--text-muted);
  --stone: var(--text-subtle);
  --ink: var(--ink-950);
  --surface: var(--surface-raised);
  --border: var(--border-default);
  --border-glow: var(--signal-dim);
  --shadow-glow: var(--shadow-signal);

  /* ——— Typography ——— */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-heading: 'Satoshi', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Fluid Type Scale (clamp: min, preferred, max) */
  --text-hero: clamp(4rem, 10vw, 8rem);
  --text-display: clamp(3.5rem, 8vw, 8rem);
  --text-h1: clamp(2.5rem, 5vw, 4rem);
  --text-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --text-h3: clamp(1.375rem, 2.5vw, 1.75rem);
  --text-h4: clamp(1.125rem, 2vw, 1.375rem);
  --text-lead: clamp(1.125rem, 1.5vw, 1.25rem);
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-micro: 0.6875rem;

  /* Legacy aliases */
  --font-display-legacy: var(--font-heading);
  --display-2xl: var(--text-display);
  --display-xl: var(--text-h1);
  --display-lg: var(--text-h2);
  --display-md: var(--text-h3);
  --display-sm: var(--text-h4);
  --body-xl: var(--text-lead);
  --body-lg: var(--text-body);
  --body-md: 0.9375rem;
  --body-sm: var(--text-sm);
  --body-xs: var(--text-xs);
  --label-sm: var(--text-xs);
  --label-xs: var(--text-micro);

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.1em;
  --tracking-mega: 0.16em;
  --tracking-mega-wide: 0.16em;

  /* ——— Spacing (4pt Base Grid) ——— */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6rem;     /* 96px */
  --space-12: 8rem;     /* 128px */
  --space-13: 10rem;    /* 160px */
  --space-14: 12rem;    /* 192px */
  --space-15: 16rem;    /* 256px */
  --space-16: 20rem;    /* 320px */

  /* Legacy aliases */
  --space-2xs: var(--space-1);
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-3);
  --space-lg: var(--space-4);
  --space-xl: var(--space-5);
  --space-2xl: var(--space-6);
  --space-3xl: var(--space-8);
  --space-4xl: var(--space-9);
  --space-5xl: var(--space-11);
  --space-6xl: var(--space-12);

  /* ——— Border Radius ——— */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* ——— Shadows ——— */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-2xl: 0 32px 80px rgba(0, 0, 0, 0.6);

  /* Colored Glow Shadows */
  --shadow-signal: 0 0 40px var(--signal-glow);
  --shadow-signal-soft: 0 0 80px rgba(200, 255, 0, 0.08);
  --shadow-horizon: 0 0 40px var(--horizon-glow);
  --shadow-depth: 0 0 40px var(--depth-glow);
  --shadow-calm: 0 0 40px var(--calm-glow);

  /* Elevation Shadows (for cards/surfaces) */
  --elevation-1: var(--shadow-xs);
  --elevation-2: var(--shadow-sm);
  --elevation-3: var(--shadow-md);
  --elevation-4: var(--shadow-lg);
  --elevation-5: var(--shadow-xl);

  /* ——— Glassmorphism ——— */
  --glass-bg: rgba(20, 20, 22, 0.72);
  --glass-bg-strong: rgba(20, 20, 22, 0.88);
  --glass-bg-subtle: rgba(20, 20, 22, 0.48);
  --glass-border: rgba(245, 245, 240, 0.06);
  --glass-border-strong: rgba(245, 245, 240, 0.1);
  --glass-blur: 20px;
  --glass-blur-strong: 40px;
  --glass-blur-subtle: 10px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  /* ——— Motion ——— */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --duration-cinematic: 1200ms;

  /* Stagger */
  --stagger-base: 45ms;
  --stagger-tight: 25ms;
  --stagger-loose: 80ms;

  /* ——— Layout ——— */
  --container-narrow: 720px;
  --container-default: 1180px;
  --container-wide: 1360px;
  --container-full: 100%;
  --nav-height: 80px;
  --nav-height-mobile: 64px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --gutter-sm: clamp(1rem, 3vw, 1.5rem);
  --gutter-xs: 1rem;

  /* Grid */
  --grid-columns: 12;
  --grid-gap: var(--gutter);
  --grid-gap-sm: var(--gutter-sm);

  /* ——— Z-Index Scale ——— */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-cursor: 900;
  --z-preloader: 1000;

  /* ——— Breakpoints (for JS reference) ——— */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ——— Light Theme (Optional - for future) ——— */
@media (prefers-color-scheme: light) {
  :root[data-theme="light"] {
    --ink-950: #FEFEFE;
    --ink-900: #FAFAFA;
    --ink-800: #F5F5F5;
    --ink-700: #EEEEEE;
    --ink-600: #E0E0E0;
    --ink-500: #D0D0D0;
    --ink-400: #B0B0B0;
    --ink-300: #909090;
    --ink-200: #707070;
    --ink-100: #505050;

    --surface-ground: var(--ink-900);
    --surface-base: var(--ink-800);
    --surface-raised: var(--ink-700);
    --surface-overlay: var(--ink-600);
    --surface-hover: var(--ink-500);

    --text-inverse: #FAFAFA;
    --text-base: #0A0A0B;
    --text-muted: #3D3C3A;
    --text-subtle: #6B6965;
    --text-disabled: #A09E98;

    --border-subtle: rgba(10, 10, 11, 0.04);
    --border-default: rgba(10, 10, 11, 0.08);
    --border-strong: rgba(10, 10, 11, 0.14);
    --border-glass: rgba(10, 10, 11, 0.06);

    --glass-bg: rgba(250, 250, 250, 0.72);
    --glass-bg-strong: rgba(250, 250, 250, 0.88);
    --glass-bg-subtle: rgba(250, 250, 250, 0.48);
    --glass-border: rgba(10, 10, 11, 0.06);
    --glass-border-strong: rgba(10, 10, 11, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  }
}

/* ——— High Contrast Mode ——— */
@media (prefers-contrast: more) {
  :root {
    --border-default: rgba(245, 245, 240, 0.2);
    --border-strong: rgba(245, 245, 240, 0.3);
    --text-muted: #D8D6D0;
    --text-subtle: #A09E98;
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7);
  }
}

/* ——— Reduced Motion ——— */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-cinematic: 0ms;
  }
}