/* navid.tech — tokens.css — colour, type, space, radius, shadow, layout, motion.
   Load first: tokens.css -> base.css -> components.css.
   Light is the default; dark applies via prefers-color-scheme unless
   <html data-theme="light">, and [data-theme="dark"|"light"] always wins.
   Contrast measured per WCAG 2.1: body text >= 4.5:1, large text/UI >= 3:1.
   Full rationale and the ratio table: docs/DESIGN.md */
:root {
  /* ---- Raw ramps (theme-independent; never use these directly in CSS) ---- */
  /* Slate-navy ramp, from the legacy brand navy #2c3e50 / #34495e, cooler and deeper. */
  --c-navy-950: #0c151d; --c-navy-900: #121e28; --c-navy-850: #16232e; --c-navy-800: #1a2937;
  --c-navy-750: #16222e; --c-navy-700: #1d3346; --c-navy-600: #2a3d4d; --c-navy-500: #40525f;
  --c-navy-400: #55687a; --c-navy-300: #93a7b5; --c-navy-200: #b2c3cf; --c-navy-150: #d9e1e7;
  --c-navy-100: #eef2f5; --c-navy-75: #f1f5f7; --c-navy-50: #f6f8f9; --c-white: #ffffff;
  /* Teal ramp. #31cdcf (legacy accent) stays the signature on dark surfaces and is
     darkened to #0d6e71 for text on light ones — the original is 1.9:1 on white. */
  --c-teal-950: #06181a; --c-teal-900: #12303a; --c-teal-850: #155055; --c-teal-800: #0a585b;
  --c-teal-700: #0d6e71; --c-teal-600: #128a8d;
  /* large text / icons / borders only (4.16:1 on #fff) */
  --c-teal-500: #31cdcf; /* legacy brand accent */
  --c-teal-400: #3ed7d9; --c-teal-300: #6ae9ea; --c-teal-250: #7bd8da; --c-teal-200: #b9ecec;
  --c-teal-100: #e3f1f1; --c-teal-050: #16323c; /* dark-mode tinted surface */
  /* Warm highlight (awards, "new", callouts). Used sparingly. */
  --c-amber-800: #8a5212; --c-amber-300: #e8b168; --c-amber-100: #f6edde;
  --c-amber-900: #33260f;
  /* Status */
  --c-red-800: #a3351f; --c-red-300: #ff9c86; --c-green-800: #1c6a41; --c-green-300: #5fd08d;
  --c-violet-800: #4a4a86; --c-violet-300: #b3b0ec;
  /* ---- Semantic colour: LIGHT theme -------------------------------------- */
  color-scheme: light; --bg: var(--c-navy-50); /* page ground                       */
  --bg-surface: var(--c-white); /* cards, header, tables             */
  --bg-subtle: var(--c-navy-100); /* code blocks, table stripes, wells */
  --bg-inset: var(--c-navy-75); /* inline code, kbd                  */
  --bg-inverse: var(--c-navy-850); /* footer, dark hero band            */
  --bg-accent-soft: var(--c-teal-100); /* tag/pill background               */
  --bg-warm-soft: var(--c-amber-100); --text: var(--c-navy-850);
  /* 15.0:1 on --bg  | 15.98:1 on white */
  --text-secondary: var(--c-navy-500); /*  7.61:1 on --bg                    */
  --text-muted: var(--c-navy-400); /*  5.40:1 on --bg | 5.11:1 on subtle */
  --text-inverse: var(--c-navy-50); /* 15.0:1 on --bg-inverse             */
  --text-on-accent: var(--c-white); /*  6.02:1 on --accent                */
  --accent: var(--c-teal-700); /*  5.66:1 on --bg | 6.02:1 on white  */
  --accent-hover: var(--c-teal-800); /*  8.20:1 on white                   */
  --accent-quiet: var(--c-teal-600); /* borders/icons/large text only      */
  --accent-contrast: var(--c-teal-800); /*  7.08:1 on --bg-accent-soft        */
  --link: var(--accent); --link-hover: var(--accent-hover); --link-visited: var(--c-violet-800);
  /*  7.54:1 on --bg                    */
  --border: var(--c-navy-150); /* hairlines, card edges              */
  --border-strong: var(--c-navy-300); /* inputs, active edges (3.0:1 on bg)  */
  --border-accent: var(--c-teal-600); --focus-ring: var(--c-teal-700);
  /*  5.66:1 on --bg (needs >= 3:1)     */
  --selection-bg: var(--c-teal-200); --selection-text: var(--c-navy-850);
  /* 12.38:1                            */
  --highlight: var(--c-amber-800); /*  5.98:1 on --bg                    */
  --danger: var(--c-red-800); /*  6.39:1 on --bg                    */
  --success: var(--c-green-800); /*  6.18:1 on --bg                    */
  --scrollbar-thumb: var(--c-navy-200); --scrollbar-track: var(--c-navy-100);
  /* Shadows: low-alpha navy, not black — keeps the cool cast consistent. */
  --shadow-color: 209 42% 12%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 2px 6px hsl(var(--shadow-color) / 0.05);
  --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 6px 16px hsl(var(--shadow-color) / 0.08);
  --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.06), 0 16px 40px hsl(var(--shadow-color) / 0.12);
  --shadow-focus: 0 0 0 3px hsl(184 79% 24% / 0.28);
  /* ---- Typography -------------------------------------------------------- */
  /* System stacks only; nothing is fetched from a third party. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-display: ui-serif, "New York", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Roboto Mono", monospace;
  /* Fluid 360px -> 1280px viewport; body 16 -> 17px, ratio ~1.20 -> ~1.28. */
  --text-2xs: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem); /* 11 -> 12 */
  --text-xs: clamp(0.75rem, 0.73rem + 0.11vw, 0.8125rem); /* 12 -> 13 */
  --text-sm: clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem); /* 13 -> 15 */
  --text-base: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem); /* 16 -> 17 */
  --text-md: clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem); /* 17 -> 19 */
  --text-lg: clamp(1.1875rem, 1.10rem + 0.38vw, 1.375rem); /* 19 -> 22 */
  --text-xl: clamp(1.375rem, 1.24rem + 0.58vw, 1.75rem); /* 22 -> 28 */
  --text-2xl: clamp(1.625rem, 1.41rem + 0.93vw, 2.25rem); /* 26 -> 36 */
  --text-3xl: clamp(1.9375rem, 1.58rem + 1.54vw, 2.9375rem); /* 31 -> 47 */
  --text-4xl: clamp(2.25rem, 1.72rem + 2.28vw, 3.625rem); /* 36 -> 58 */
  --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.65;
  --leading-loose: 1.75; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --weight-bold: 700; --tracking-tight: -0.018em; /* display headings                */
  --tracking-snug: -0.008em; /* sub-headings                    */
  --tracking-normal: 0; --tracking-wide: 0.06em; /* eyebrows, small caps labels     */
  /* In em, not ch. ch is the width of "0", which is 15-40% wider than the
     average glyph and varies with whichever stack member the OS actually
     has, so 68ch measured out anywhere from 75 to 90 real characters. 34em
     lands at 70-75 in every stack member, and scales with the element's
     own type size the way a measure should. */
  --measure: 34em; /* comfortable reading width for prose   */
  --measure-narrow: 29em;
  /* ---- Space scale (4px base, roughly 1.5x steps) ------------------------ */
  --space-3xs: 0.25rem; /*  4 */
  --space-2xs: 0.375rem; /*  6 */
  --space-xs: 0.5rem; /*  8 */
  --space-sm: 0.75rem; /* 12 */
  --space-md: 1rem; /* 16 */
  --space-lg: 1.5rem; /* 24 */
  --space-xl: 2rem; /* 32 */
  --space-2xl: 3rem; /* 48 */
  --space-3xl: 4rem; /* 64 */
  --space-4xl: 6rem; /* 96 */
  /* Fluid section rhythm — the only vertical spacing that scales.
     --space-section separates two bands of different background;
     --space-section-tight is the half-step used inside one band, for a page
     head that belongs to the content under it. Keeping them proportional is
     what stops stacked paddings from opening a hole between a heading and
     the thing it heads. */
  --space-section: clamp(2.75rem, 1.6rem + 5vw, 5.5rem); /* 44 → 88 */
  --space-section-tight: clamp(1.75rem, 1.15rem + 2.6vw, 3.25rem); /* 28 → 52 */
  --space-gutter: clamp(1.125rem, 0.6rem + 2.2vw, 2rem);
  /* ---- Radius ------------------------------------------------------------ */
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --radius-pill: 999px;
  /* ---- Layout ------------------------------------------------------------ */
  --container-xs: 36rem; /*  576px — forms, short notes          */
  --container-prose:42rem; /*  672px — blog post body; 68-72 chars */
  --container-sm: 52rem; /*  832px — CV / publications column    */
  --container-md: 64rem; /* 1024px — default page container      */
  --container-lg: 75rem; /* 1200px — wide grids, home            */
  --container-xl: 85rem; /* 1360px — full-bleed hero content     */
  --header-height: 3.75rem; /* 60px mobile; 68px from --bp-md up    */
  --border-width: 1px;
  /* Shorthand aliases; they resolve per element, so theme swaps still apply. */
  --hairline: var(--border-width) solid var(--border);
  --hairline-strong: var(--border-width) solid var(--border-strong);
  /* Breakpoints (literals in components.css; media queries cannot read vars):
     620px, 768px, 1024px. */
  /* ---- Z-index ----------------------------------------------------------- */
  --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200;
  --z-nav-panel: 300; --z-overlay: 400; --z-toast: 500; --z-skiplink: 900;
  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1); --dur-fast: 120ms; --dur-base: 180ms;
  --dur-slow: 280ms;
  --transition-color: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  --transition-transform: transform var(--dur-base) var(--ease-out);
  --transition-shadow: box-shadow var(--dur-base) var(--ease-out);
}

/* DARK THEME — same semantic names remapped; the rule list is repeated for the
   OS-preference selector and for the explicit [data-theme="dark"] override. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark; --bg: var(--c-navy-950); --bg-surface: var(--c-navy-900);
    --bg-subtle: var(--c-navy-800); --bg-inset: var(--c-navy-750);
    --bg-inverse: var(--c-navy-800); --bg-accent-soft: var(--c-teal-050);
    --bg-warm-soft: var(--c-amber-900); --text: #e8eff4; /* 15.85:1 on --bg | 14.56:1 surface */
    --text-secondary: var(--c-navy-200); /* 10.17:1 on --bg                   */
    --text-muted: var(--c-navy-300); /*  7.40:1 on --bg | 6.79:1 surface  */
    --text-inverse: #e8eff4; --text-on-accent: var(--c-teal-950);
    /* 10.34:1 on --accent               */
    --accent: var(--c-teal-400); /* 10.46:1 on --bg | 9.60:1 surface  */
    --accent-hover: var(--c-teal-300); /* 11.64:1 on surface                */
    --accent-quiet: var(--c-teal-500); --accent-contrast: var(--c-teal-250);
    /*  8.15:1 on --bg-accent-soft       */
    --link: var(--accent); --link-hover: var(--accent-hover);
    --link-visited: var(--c-violet-300);
    /*  9.06:1 on --bg                   */
    --border: var(--c-navy-600); --border-strong: var(--c-navy-500);
    --border-accent: var(--c-teal-600); --focus-ring: var(--c-teal-400);
    /* 10.46:1 on --bg                   */
    --selection-bg: var(--c-teal-850); --selection-text: #e8eff4;
    /*  7.83:1                           */
    --highlight: var(--c-amber-300); /*  9.57:1 on --bg                   */
    --danger: var(--c-red-300); /*  9.08:1 on --bg                   */
    --success: var(--c-green-300); /*  9.55:1 on --bg                   */
    --scrollbar-thumb: var(--c-navy-600); --scrollbar-track: var(--c-navy-900);
    --shadow-color: 205 60% 3%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.5);
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.5), 0 2px 6px hsl(var(--shadow-color) / 0.4);
    --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.45), 0 6px 16px hsl(var(--shadow-color) / 0.55);
    --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.5), 0 16px 40px hsl(var(--shadow-color) / 0.65);
    --shadow-focus: 0 0 0 3px hsl(182 67% 55% / 0.32);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark; --bg: var(--c-navy-950); --bg-surface: var(--c-navy-900);
  --bg-subtle: var(--c-navy-800); --bg-inset: var(--c-navy-750);
  --bg-inverse: var(--c-navy-800); --bg-accent-soft: var(--c-teal-050);
  --bg-warm-soft: var(--c-amber-900); --text: #e8eff4; --text-secondary: var(--c-navy-200);
  --text-muted: var(--c-navy-300); --text-inverse: #e8eff4; --text-on-accent: var(--c-teal-950);
  --accent: var(--c-teal-400); --accent-hover: var(--c-teal-300);
  --accent-quiet: var(--c-teal-500); --accent-contrast: var(--c-teal-250);
  --link: var(--accent); --link-hover: var(--accent-hover); --link-visited: var(--c-violet-300);
  --border: var(--c-navy-600); --border-strong: var(--c-navy-500);
  --border-accent: var(--c-teal-600); --focus-ring: var(--c-teal-400);
  --selection-bg: var(--c-teal-850); --selection-text: #e8eff4; --highlight: var(--c-amber-300);
  --danger: var(--c-red-300); --success: var(--c-green-300);
  --scrollbar-thumb: var(--c-navy-600); --scrollbar-track: var(--c-navy-900);
  --shadow-color: 205 60% 3%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.5);
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.5), 0 2px 6px hsl(var(--shadow-color) / 0.4);
  --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.45), 0 6px 16px hsl(var(--shadow-color) / 0.55);
  --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.5), 0 16px 40px hsl(var(--shadow-color) / 0.65);
  --shadow-focus: 0 0 0 3px hsl(182 67% 55% / 0.32);
}

/* Forced-colors (Windows High Contrast): let the OS own colour, keep layout. */
@media (forced-colors: active) {
  :root {
    --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    --shadow-focus: none;
  }
}