/* ============================================================================
   Merit — design tokens
   The single source of colour, geometry, type and motion for both surfaces:
   meritcv.com and app.meritcv.com.

   Palette: "Ink & Amber" — cool neutral ink surfaces with a gold-amber accent.
   Geometry follows the iOS / macOS reference: one uniform radius scale, an 8pt
   rhythm, layered translucent materials.

   This file is copied into web/ and landing/ by `npm run design:sync`.
   Edit it here, never in the copied output.
   ========================================================================= */

/* ---------------------------------------------------------------- geometry
   One radius scale, applied uniformly. The tight, consistent corner is the
   core of the design language: chips are pills, inputs 8, controls 10, cards
   14, sheets 20, modals 28. Never invent an in-between value.            */
:root {
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* 8pt rhythm with a 4pt half-step */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* The CV document is a separate surface with its own print-oriented face.
     System serif only — nothing is downloaded. --font-doc is the single place
     to swap in a self-hosted serif without touching the rest of the system.
     Long-form writing (an evidence statement, pasted notes) uses the same
     face, so what you type reads the way it will appear on the page. */
  --font-doc: Georgia, "Iowan Old Style", "Times New Roman", ui-serif, serif;

  --t-1: 11px;
  --t-2: 12px;
  --t-3: 13px;
  --t-4: 15px;
  --t-5: 17px;
  --t-6: 20px;
  --t-7: 24px;
  --t-8: 30px;
  --t-9: 38px;
  --t-10: 48px;
  --t-11: 60px;

  /* Optical tracking. Display sizes need negative tracking; body none. */
  --track-display: -0.036em;
  --track-heading: -0.024em;
  --track-card: -0.016em;
  --track-body: -0.004em;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.55;

  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 590;
  --w-bold: 650;

  /* motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.32, 0.44, 1);
  --t-press: 90ms;
  --t-fast: 180ms;
  --t-base: 260ms;
  --t-slow: 380ms;

  /* layered elevation — soft, never hard */
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.06);
  --elev-2: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 24px -14px rgb(0 0 0 / 0.24);
  --elev-3: 0 24px 48px -12px rgb(0 0 0 / 0.32), 0 2px 8px rgb(0 0 0 / 0.12);

  /* chrome */
  --topbar-h: 56px;
  --tabbar-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shell-max: 1180px;
}

/* ------------------------------------------------------------------- light
   Both themes are peers. Light is not an afterthought inversion.        */
:root {
  color-scheme: light;

  --bg: #f4f5f7;
  --surface-1: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eceef2;
  --surface-4: #e2e5ea;

  --line: rgb(0 0 0 / 0.08);
  --line-strong: rgb(0 0 0 / 0.15);
  --line-faint: rgb(0 0 0 / 0.05);

  --label: #14161a;
  --label-2: #47505a;
  --label-3: #646a75;
  --label-inv: #ffffff;

  /* Measured against every light surface. `--accent` is the standard step
     (text on background: 4.93:1) and `--accent-solid` is the fill used when
     white text sits on top (5.39:1 for the ink). Two steps because one value
     cannot pass both jobs. */
  --accent: #845a10;
  --accent-solid: #7a520d;
  --accent-press: #684509;
  --accent-soft: rgb(132 90 16 / 0.11);
  --accent-edge: rgb(132 90 16 / 0.32);
  --accent-ink: #ffffff;
  --accent-text: var(--accent);

  --success: #256b4e;
  --success-soft: rgb(37 107 78 / 0.11);
  --warn: #7d5b10;
  --warn-soft: rgb(138 101 18 / 0.11);
  --danger: #a63428;
  --danger-soft: rgb(166 52 40 / 0.11);
  --info: #2b5aa0;
  --info-soft: rgb(43 90 160 / 0.11);

  /* Translucent materials. The rgb triplet feeds background-color with alpha
     so bars and sheets composite over whatever scrolls beneath them. */
  --bar-rgb: 255 255 255;
  --bar-alpha: 0.78;
  --sheet-rgb: 255 255 255;
  --sheet-alpha: 0.9;
  --material-blur: saturate(180%) blur(20px);

  --focus: #6b470c;
  --shadow-card: var(--elev-2);
  --shadow-float: var(--elev-3);
  --track: #e2e5ea;
  --chip-bg: rgb(20 22 26 / 0.05);
  --input-bg: #ffffff;
  --doc-bg: #ffffff;
  --doc-ink: #16181c;
}

/* -------------------------------------------------------------------- dark */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #121316;
  --surface-1: #1a1c20;
  --surface-2: #22252a;
  --surface-3: #2b2f35;
  --surface-4: #35393f;

  --line: rgb(255 255 255 / 0.1);
  --line-strong: rgb(255 255 255 / 0.18);
  --line-faint: rgb(255 255 255 / 0.06);

  --label: #f4f5f7;
  --label-2: #aeb4be;
  --label-3: #939aa4;
  --label-inv: #14161a;

  --accent: #e3a84a;
  --accent-solid: #e3a84a;
  --accent-press: #c9902f;
  --accent-soft: rgb(227 168 74 / 0.16);
  --accent-edge: rgb(227 168 74 / 0.38);
  --accent-ink: #1f1708;
  --accent-text: var(--accent);

  --success: #5fbf95;
  --success-soft: rgb(95 191 149 / 0.16);
  --warn: #e0a93c;
  --warn-soft: rgb(224 169 60 / 0.16);
  --danger: #ec7266;
  --danger-soft: rgb(236 114 102 / 0.16);
  --info: #82b0f0;
  --info-soft: rgb(130 176 240 / 0.16);

  --bar-rgb: 26 28 32;
  --bar-alpha: 0.8;
  --sheet-rgb: 34 37 42;
  --sheet-alpha: 0.92;
  --material-blur: saturate(180%) blur(20px);

  --focus: #f0be6a;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px -16px rgb(0 0 0 / 0.62);
  --shadow-float: 0 24px 48px -12px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.45);
  --track: #2b2f35;
  --chip-bg: rgb(255 255 255 / 0.07);
  --input-bg: #16181c;
  --doc-bg: #fbfbf9;
  --doc-ink: #10131a;
}

/* Follow the OS when the user has not chosen a theme explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #121316;
    --surface-1: #1a1c20;
    --surface-2: #22252a;
    --surface-3: #2b2f35;
    --surface-4: #35393f;

    --line: rgb(255 255 255 / 0.1);
    --line-strong: rgb(255 255 255 / 0.18);
    --line-faint: rgb(255 255 255 / 0.06);
  
    --label: #f4f5f7;
    --label-2: #aeb4be;
    --label-3: #939aa4;
    --label-inv: #14161a;

    --accent: #e3a84a;
    /* `--accent-solid` is the fill the primary CTA paints (`.btn-primary`).
       It is declared in the light block *and* in [data-theme="dark"], so
       omitting it here left this block inheriting the LIGHT fill #7a520d —
       a dark brown on a #121316 page while `--accent-ink` had already flipped
       to #1f1708. That pairing measures 2.57:1 and reads as a disabled
       control, which is exactly how the main CTA was being read. Every token
       the explicit dark block declares must be declared here too; see
       scripts/design-tokens-check.js. */
    --accent-solid: #e3a84a;
    --accent-press: #c9902f;
    --accent-soft: rgb(227 168 74 / 0.16);
    --accent-edge: rgb(227 168 74 / 0.38);
    --accent-ink: #1f1708;
    --accent-text: var(--accent);

    --success: #5fbf95;
    --success-soft: rgb(95 191 149 / 0.16);
    --warn: #e0a93c;
    --warn-soft: rgb(224 169 60 / 0.16);
    --danger: #ec7266;
    --danger-soft: rgb(236 114 102 / 0.16);
    --info: #82b0f0;
    --info-soft: rgb(130 176 240 / 0.16);

    --bar-rgb: 26 28 32;
    --bar-alpha: 0.8;
    --sheet-rgb: 34 37 42;
    --sheet-alpha: 0.92;
    --material-blur: saturate(180%) blur(20px);

    --focus: #f0be6a;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px -16px rgb(0 0 0 / 0.62);
    --shadow-float: 0 24px 48px -12px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.45);
    --track: #2b2f35;
    --chip-bg: rgb(255 255 255 / 0.07);
    --input-bg: #16181c;
    --doc-bg: #fbfbf9;
    --doc-ink: #10131a;
  }
}

/* --------------------------------------------------- legacy token bridge
   The pre-overhaul stylesheets referenced a different set of names. These
   alias the new tokens onto the old names so existing rules keep resolving.

   The markup has now been migrated: every view uses the `m-` components and
   no template emits `.btn`, `.chip`, `.micro`, `.faint`, `.field`,
   `.page-title`, `.kicker` or `.notice`. What remains is a smaller set of
   names that live only in web/styles.css, which is still the app's shell
   layer. Delete an alias once nothing references it. */
:root {
  --font-ui: var(--font);
  --fs-micro: var(--t-1);
  --fs-mini: var(--t-2);
  --fs-sm: var(--t-3);
  --fs-body: var(--t-4);
  --fs-md: var(--t-5);
  --fs-lg: var(--t-6);
  --fs-xl: var(--t-7);
  --fs-display: var(--t-8);

  --sp-1: var(--s-1);
  --sp-2: 6px;
  --sp-3: var(--s-2);
  --sp-4: 10px;
  --sp-5: var(--s-3);
  --sp-6: 14px;
  --sp-7: var(--s-4);
  --sp-8: var(--s-5);
  --sp-9: var(--s-6);
  --sp-10: var(--s-7);

  --text: var(--label);
  --text-2: var(--label-2);
  --text-3: var(--label-3);
  --text-4: var(--label-3);
  --accent-text: var(--accent);
  --accent-ghost: var(--accent-soft);
  --accent-edge-soft: var(--accent-edge);
  --ok: var(--success);
  --ok-ghost: var(--success-soft);
  --warn-ghost: var(--warn-soft);
  --danger-ghost: var(--danger-soft);
  --chip: var(--chip-bg);
  --key-bg: var(--surface-3);
  --key-edge: var(--line);
  --evidence: var(--info);
  --ease-out: var(--ease);
  --nav-h: var(--tabbar-h);
  --topbar-h: 56px;
  --safe: env(safe-area-inset-bottom, 0px);
  --rail-w: 184px;
  --shell-gutter: var(--s-6);
}