/* ============================================================
   UX Portfolio 2026 — Design Tokens
   Three-tier architecture: Brand → Alias → Mapped.
   Brand color + spacing values are the EXACT values resolved from
   the Figma design system (file 0FRcX5SylZ0Uy1gYzEpPtt, node 6:2).
   Components only ever consume MAPPED tokens.
   ============================================================ */

:root {
  /* ---------- TIER 1 · BRAND (exact DS values) ---------- */

  /* Sand — warm neutral (Surface family) */
  --sand-50:  #f8f7f5;
  --sand-100: #f1eeea;
  --sand-200: #e2ddd6;
  --sand-300: #d4ccc1;
  --sand-400: #c5bbad;
  --sand-500: #b7aa98;
  --sand-600: #92887a;
  --sand-700: #6e665b;
  --sand-800: #49443d;

  /* Slate — cool neutral (Neutral family) */
  --slate-50:  #eff0f0;
  --slate-100: #dfe0e0;
  --slate-200: #bfc2c2;
  --slate-300: #9fa3a3;
  --slate-400: #7f8585;
  --slate-500: #5f6666;
  --slate-600: #4c5252;
  --slate-700: #393d3d;
  --slate-800: #1e2424;

  /* River — muted blue (Info family) */
  --river-50:  #eff2f3;
  --river-100: #dfe3e6;
  --river-200: #bfc7cd;
  --river-300: #9facb3;
  --river-400: #7f909a;
  --river-500: #5f7481;
  --river-600: #4c5d67;
  --river-700: #39464d;
  --river-800: #262e34;

  /* Moss — sage green (Success family) */
  --moss-50:  #f0f2f1;
  --moss-100: #e0e4e1;
  --moss-200: #c2cac4;
  --moss-300: #a3afa6;
  --moss-400: #859589;
  --moss-500: #667a6b;
  --moss-600: #526256;
  --moss-700: #3d4940;
  --moss-800: #29312b;

  /* Clay — warm terracotta (Primary family) */
  --clay-50:  #f9f3f0;
  --clay-100: #f3e7df;
  --clay-200: #e7cfc0;
  --clay-300: #dab6a0;
  --clay-400: #ce9e81;
  --clay-500: #c28661;
  --clay-600: #9b6b4e;
  --clay-700: #74503a;
  --clay-800: #4e3627;

  /* Ember — red (Error family) */
  --ember-50:  #faeaea;
  --ember-100: #f3d4d4;
  --ember-200: #e8a9a9;
  --ember-300: #dc7e7e;
  --ember-400: #d15353;
  --ember-500: #c52828;
  --ember-600: #9e2020;
  --ember-700: #761818;
  --ember-800: #4f1010;

  --white: #ffffff;
  --black: #000000;

  /* ---------- TIER 1 · BRAND · Spacing scale (px) ---------- */
  --scale-0: 0;     --scale-25: 1px;  --scale-50: 2px;  --scale-100: 4px;
  --scale-200: 8px; --scale-300: 12px; --scale-400: 16px; --scale-500: 20px;
  --scale-600: 24px; --scale-700: 28px; --scale-800: 32px;
  --scale-900: 48px; --scale-1000: 64px; --scale-1100: 96px; --scale-1200: 128px;

  /* ---------- TIER 1 · BRAND · Shape ---------- */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --radius-xl: 16px; --radius-2xl: 24px; --radius-round: 32px; --radius-full: 999px;
  --border-width-sm: 1px; --border-width-md: 2px;

  /* ---------- TIER 1 · BRAND · Type families ---------- */
  --font-heading: "Libre Baskerville", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Geist Variable", "Geist", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- TIER 2 · ALIAS ---------- */
  --primary-50: var(--clay-50);
  --primary-default: var(--clay-500);
  --primary-600: var(--clay-600);
  --info-500: var(--river-500);
  --success-200: var(--moss-200);
  --success-500: var(--moss-500);

  /* ---------- TIER 3 · MAPPED (UI consumes only these) ---------- */
  --surface-page: var(--white);
  --surface-default: var(--sand-50);
  --surface-raised: var(--white);
  --surface-sunken: var(--sand-100);
  --surface-action: var(--clay-500);
  --surface-action-hover: var(--clay-600);
  --surface-action-light: var(--clay-50);
  --surface-success: var(--moss-50);
  --surface-inverse: var(--slate-800);

  --text-headings: var(--slate-800);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-500);
  --text-placeholder: var(--slate-400);
  --text-action: var(--clay-500);
  --text-action-hover: var(--clay-600);
  --text-on-action: var(--white);
  --text-on-inverse: var(--sand-50);
  --text-success: var(--moss-500);

  --icon-default: var(--slate-800);
  --icon-muted: var(--slate-400);
  --icon-action: var(--clay-500);

  --border-default: var(--sand-200);
  --border-subtle: var(--sand-100);
  --border-strong: var(--slate-200);
  --border-action: var(--clay-500);
  --border-focus: var(--clay-500);
  --border-hover: var(--sand-400);   /* warm-neutral card hover, no orange */

  /* ---------- Liquid-glass primitives (clean, modern) ---------- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-blur: 20px;
  --glass-shadow: 0 8px 32px rgba(73, 68, 61, 0.10), inset 0 1px 0 var(--glass-highlight);

  /* Soft, warm shadows */
  --shadow-xs: 0 1px 2px rgba(73, 68, 61, 0.05);
  --shadow-sm: 0 2px 10px rgba(73, 68, 61, 0.06);
  --shadow-md: 0 10px 30px rgba(73, 68, 61, 0.08);
  --shadow-lg: 0 28px 70px rgba(73, 68, 61, 0.12);
  --shadow-focus: 0 0 0 3px var(--clay-200);

  /* Topographic contour pattern opacity */
  --topo-opacity: 0.45;

  /* Aurora glows (nature-inspired ambient) */
  --glow-clay: rgba(194, 134, 97, 0.20);
  --glow-river: rgba(95, 116, 129, 0.16);
  --glow-moss: rgba(102, 122, 107, 0.16);

  /* ---------- Type scale (fluid, tops out at DS sizes) ---------- */
  --fs-display: clamp(2.5rem, 1.1rem + 4.2vw, 3.75rem);   /* → 60 */
  --fs-h2: clamp(1.875rem, 1.2rem + 2.3vw, 3rem);         /* → 48 */
  --fs-h3: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem);        /* → 40 */
  --fs-h4: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);      /* → 28 */
  --fs-h5: 1.5rem;                                         /*   24 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);     /* → 20 */
  --fs-body: 1rem;                                         /*   16 */
  --fs-sm: 0.875rem;                                       /*   14 */
  --fs-xs: 0.75rem;                                        /*   12 */
  --fs-overline: 0.75rem;

  --lh-tight: 1.06; --lh-snug: 1.18; --lh-normal: 1.55; --lh-relaxed: 1.7;
  --tracking-tight: -0.02em; --tracking-overline: 0.16em;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 140px);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms; --dur-base: 300ms; --dur-slow: 620ms; --dur-reveal: 900ms;
}

/* ============================================================
   DARK THEME — soft warm charcoal. Remaps MAPPED + glass only.
   ============================================================ */
:root[data-theme="dark"] {
  --surface-page: #14191a;
  --surface-default: #1b2122;
  --surface-raised: #20282a;
  --surface-sunken: #111516;
  --surface-action: var(--clay-400);
  --surface-action-hover: var(--clay-300);
  --surface-action-light: rgba(206, 158, 129, 0.14);
  --surface-inverse: #0f1314;

  --text-headings: #f4f2ee;
  --text-body: #d3cfc7;
  --text-muted: #9aa1a1;
  --text-placeholder: #7f8585;
  --text-action: var(--clay-300);
  --text-action-hover: var(--clay-200);
  --text-on-action: #14191a;
  --text-on-inverse: var(--sand-50);

  --icon-default: #f4f2ee;
  --icon-muted: #9aa1a1;
  --icon-action: var(--clay-300);

  --border-default: rgba(244, 242, 238, 0.10);
  --border-subtle: rgba(244, 242, 238, 0.06);
  --border-strong: rgba(244, 242, 238, 0.18);
  --border-hover: rgba(244, 242, 238, 0.26);

  --glass-bg: rgba(28, 34, 35, 0.5);
  --glass-bg-strong: rgba(32, 40, 42, 0.66);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--glass-highlight);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(206, 158, 129, 0.35);

  --glow-clay: rgba(206, 158, 129, 0.18);
  --glow-river: rgba(159, 172, 179, 0.12);
  --glow-moss: rgba(163, 175, 166, 0.12);

  --topo-opacity: 0.18;
}