/* accs123 design tokens. The single source for colour, type, spacing, radius, elevation and motion.
   Themes switch on html[data-theme]. Every text/fill pair below was checked against WCAG AA. */

/* ---- fonts: self-hosted variable files, swap with metric-matched fallbacks so text does not shift ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Consolas"); size-adjust: 109.1%; ascent-override: 93.5%; descent-override: 27.5%; line-gap-override: 0%; }

:root {
  /* ---- neutral scale (shared by both themes) ---- */
  --n-0: #FFFFFF; --n-50: #F5F6F8; --n-100: #ECEEF2; --n-200: #DFE2E8; --n-300: #C5CAD4; --n-400: #959DAD;
  --n-500: #687185; --n-600: #4A5162; --n-700: #333948; --n-800: #191D26; --n-900: #12151C; --n-950: #0B0D12;

  /* ---- colour roles, light ---- */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --sunken: #ECEEF2;
  --raised: #FFFFFF;
  --border: #DFE2E8;
  --border-strong: #868EA0;
  --text: #14171F;
  --text-2: #4A5162;
  --muted: #636B7C;

  --primary: #2250DC;
  --primary-hover: #1A41BD;
  --primary-active: #15369E;
  --primary-soft: #E9EFFF;
  --primary-text: #1D46C7;
  --on-primary: #FFFFFF;

  --accent: #0A736E;
  --accent-fill: #0E958E;
  --accent-soft: #DFF5F2;

  --success: #126B39;
  --success-soft: #E3F4EA;
  --success-fill: #15803D;
  --warning: #8A4B00;
  --warning-soft: #FFF1D6;
  --danger: #B3202A;
  --danger-soft: #FDEBEC;
  --danger-fill: #C62833;

  --focus: #2250DC;
  --code-bg: #10131A;
  --code-text: #D5DAE6;
  --code-muted: #7F889C;
  --inverse-bg: #14171F;
  --inverse-text: #ECEEF2;
  --inverse-muted: #B9BFCC;
  --ink: 11 13 18;

  /* ---- type ---- */
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --lh-display: 1.05;
  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-dense: 1.45;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-tight: -0.01em;

  /* ---- spacing (4px base) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --w-container: 1200px;
  --gutter: 24px;
  --section: 96px;

  /* ---- radius ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* ---- elevation ---- */
  --e1: 0 1px 2px rgb(var(--ink) / 0.06);
  --e2: 0 4px 12px -2px rgb(var(--ink) / 0.12), 0 2px 4px -2px rgb(var(--ink) / 0.08);
  --e3: 0 16px 40px -12px rgb(var(--ink) / 0.30);
  /* hover and selected only: the whole card glows, nothing else moves */
  --glow-ring: 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--primary) 45%, transparent);
  --glow-border: color-mix(in srgb, var(--primary) 55%, var(--border));

  /* ---- motion ---- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---- control sizes ---- */
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
  --header-h: 64px;

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0B0D12;
  --surface: #12151C;
  --sunken: #0E1016;
  --raised: #191D26;
  --border: #262B37;
  --border-strong: #687185;
  --text: #ECEEF2;
  --text-2: #B9BFCC;
  --muted: #959DAD;

  --primary: #3A64EC;
  --primary-hover: #2F58DE;
  --primary-active: #274BC4;
  --primary-soft: #162143;
  --primary-text: #9DB7FF;
  --on-primary: #FFFFFF;

  --accent: #4FD8CB;
  --accent-fill: #2BBFB2;
  --accent-soft: #0F2B2B;

  --success: #62DB96;
  --success-soft: #10291C;
  --success-fill: #1A8243;
  --warning: #F5C463;
  --warning-soft: #2E2310;
  --danger: #FF8C90;
  --danger-soft: #33161A;
  --danger-fill: #D93A45;

  --focus: #9DB7FF;
  --code-bg: #07080C;
  --code-text: #CDD3E1;
  --code-muted: #7F889C;
  --inverse-bg: #191D26;
  --inverse-text: #ECEEF2;
  --inverse-muted: #B9BFCC;
  --ink: 0 0 0;

  --e1: 0 1px 2px rgb(0 0 0 / 0.40);
  --e2: 0 6px 16px -4px rgb(0 0 0 / 0.60), 0 0 0 1px rgb(255 255 255 / 0.04);
  --e3: 0 20px 48px -12px rgb(0 0 0 / 0.70);

  color-scheme: dark;
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --section: 64px; }
}