/* ============================================================
   Marketing ← the app's design tokens.

   The marketing site used to carry its OWN copy of the app's palette:
   the same Ocean ramp, the same mint, the same mono stack, re-typed as
   hex literals in two separate stylesheets that had already drifted
   apart from each other and from the app (issue #305). This file
   replaces those copies with references to the real tokens, served
   from src/styles/tokens.foundation.css, so a change to the design
   system now reaches the marketing site too.

   Two marketing design languages share these tokens:
     home.css    — "Bold mosaic", the homepage (Instrument Sans)
     styles.css  — "Signal", the remaining pages (Source Sans / Serif)
   They name the same values differently, so both vocabularies are
   aliased here. That duplication of NAMES is deliberate — a shim while
   the two languages converge — but there is now only one source for
   each VALUE.

   The two DISPLAY FACES are also deliberate, and reviewed as such in
   #315 rather than left as drift. The homepage runs the app's own
   Instrument Sans so the product and its shop window match; the rest of
   the site runs Source Sans 3 / Source Serif 4, which is an editorial
   voice for longer-form pages. Converging them is a brand decision with
   a real cost — it restyles every non-homepage marketing page — so it
   stays open rather than being settled by a token cleanup. Anyone
   picking it up should treat it as a design brief, not a refactor.

   Marketing's --gold / --gold-line / --gold-text (second block below)
   are NOT the app's gold. They share a name with tokens.semantic.css but
   hold different values, and today that is harmless only because no
   marketing page loads the semantic sheet. If one ever does, the
   marketing gold will change silently — rename the trio before that
   happens.

   The first block aliases only names whose values were already
   byte-identical to an app token. Marketing keeps its own display faces,
   gutters and the Signal accent palette (moss/leaf/bronze): those are
   genuine marketing design decisions, not drift, and consolidating
   them is a design call rather than a technical one. The second block
   (#314) holds the values BOTH marketing families share and the app has
   no equivalent for.

   The Ocean greys are NOT re-declared here — the marketing sheets use
   the same --grey-N names the app does, so foundation supplies them
   directly once its stylesheet is loaded.
   ============================================================ */

:root {
  /* ── Accent ────────────────────────────────────────────────
     One mint, under each family's name for it. */
  --mint:       var(--accent);        /* both families */
  --mint-ink:   var(--accent-text);   /* Bold mosaic: text ON mint */
  --ink-solid:  var(--accent-text);   /* Signal: same value, own name */
  --mint-press: var(--accent-hover);  /* Bold mosaic: CTA hover */

  /* ── Neutrals that are the Ocean ramp under Signal names ── */
  --glass-1:   var(--grey-50);        /* page background */
  --glass-2:   var(--grey-0);         /* white sections + chips */
  --navy:      var(--grey-950);       /* the dark moment */
  --navy-2:    var(--grey-900);       /* gradient start on the dark mock-ups */
  --navy-line: var(--grey-800);
  --hair:      var(--grey-200);       /* hairline */

  /* ── Ink ladder on light ─────────────────────────────────── */
  --ink:   var(--ink-fixed);          /* == the app's light --text-1 */
  --ink-2: var(--grey-600);
  --ink-3: var(--grey-500);

  /* ── Type ────────────────────────────────────────────────────
     The display faces differ per family by design and stay declared in
     each sheet (home.css points --sans at --font-sans, which is the
     same Instrument Sans stack).

     --mono now aliases --font-mono. The two stacks used to sit one entry
     apart — the app lists SFMono-Regular between 'SF Mono' and Menlo,
     marketing never did — which was drift rather than a design decision:
     nobody chose to give the marketing site a different fallback for a
     face that only appears if IBM Plex Mono fails to load. Resolved in
     #315 by taking the app's stack. */
  --mono: var(--font-mono);

  /* ── Radii ───────────────────────────────────────────────────
     Signal's four radii are the app's rungs under its own names. */
  --r-sm: var(--r-1);    /* 4px  — tags */
  --r-md: var(--r-4);    /* 6px  — buttons, inputs, labels */
  --r-lg: var(--r-5);    /* 8px  — panes, mock-ups */
  --r-xl: var(--r-6);    /* 10px — hero frames, CTA strip */
  --r-micro: 2px;        /* below the app's smallest rung: bar ends, swatches, the menu's inner radius */
}

/* ============================================================
   Marketing-OWNED shared values (issue #314).

   Nothing below is an app token. These are values BOTH marketing
   families use and the app has no equivalent for — so they live here,
   once, rather than being re-typed in home.css and styles.css where
   they had already drifted apart. The app's own --gold (semantic
   sheet) is a different colour; marketing never loads that sheet.
   ============================================================ */
:root {
  /* ── Gold — rationed, "needs attention"; never for actions ── */
  --gold:      #e2ba6c;   /* on dark */
  --gold-line: #c9a35a;   /* chart markers on light */
  --gold-text: #8a6420;   /* gold-adjacent text on light */

  /* ── Cream — Signal's text-on-navy ink ─────────────────────── */
  --cream: #f4f2eb;

  /* ── RGB triplets ──────────────────────────────────────────────
     The only way to vary a token's alpha without relative-colour
     syntax. Each triplet IS the matching solid token, split:
       --ink-solid-rgb = --ink-solid (#0d1512)
       --navy-rgb      = --navy      (#18222c)
       --cream-rgb     = --cream
       --mint-rgb      = --mint
       --gold-rgb      = --gold
       --bronze-rgb    = --bronze (styles.css, #a9894a)            */
  --ink-solid-rgb: 13, 21, 18;
  --navy-rgb: 24, 34, 44;
  --cream-rgb: 244, 242, 235;
  --mint-rgb: 62, 213, 152;
  --gold-rgb: 226, 186, 108;
  --bronze-rgb: 169, 137, 74;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;

  /* ── Elevation ──────────────────────────────────────────────────
     The app is flat (its --shadow-card/hover are `none`); marketing
     is a poster and earns real shadows. Named by what they sit under. */
  --shadow-hair:      0 1px 2px rgba(var(--navy-rgb), .06);          /* resting pane */
  --shadow-lift:      0 10px 30px -16px rgba(var(--navy-rgb), .12);  /* hovered pane */
  --shadow-lift-lg:   0 30px 60px -30px rgba(var(--navy-rgb), .12);  /* hero photo */
  --shadow-mock-dark: 0 30px 60px -34px rgba(var(--ink-solid-rgb), .5); /* dark device mock-up */

  /* ── Stacking ladder ────────────────────────────────────────────
     The app has no z-index tokens of its own; marketing's is small. */
  --z-raise:  1;      /* lift a sibling above a later one in the DOM */
  --z-sticky: 50;     /* sticky header */
  --z-menu:   80;     /* demo-menu panel */
  --z-skip:   100;    /* skip link (Bold mosaic) */
  --z-top:    1000;   /* skip link (Signal) */

  /* ── Frost — the one backdrop blur on a marketing surface ──── */
  --frost-blur: 8px;

  /* ── The one em-relative size — the demo-menu caret, on both headers ── */
  --ts-caret: .75em;
}