/* ===========================================================================
   frontdesk - design tokens
   ---------------------------------------------------------------------------
   THE ONLY FILE IN THIS PROJECT THAT MAY CONTAIN A HEX VALUE.
   Everything else references var(--...). test/contrast.test.js enforces this.

   Two layers:
     1. PALETTE  - the ratified solomon-brand values. Never used directly by a
                   component; they exist to be assigned to layer 2.
     2. SEMANTIC - role tokens (--text-body, --accent-text, ...) that are
                   REPOINTED per band. This is what makes contrast structural
                   instead of a thing you have to remember.

   Why layer 2 exists, concretely. Measured against WCAG 2.2 AA:

       Stone  on Parchment  2.25:1   FAILS  - unusable as text on light
       Gold   on Parchment  2.45:1   FAILS  - gold text on light never happens
       Cedar  on Parchment  4.01:1   FAILS small text, passes large + UI (3:1)
       Blue   on Parchment  8.88:1   PASSES - so Blue carries accent text on light
       Gold   on Ink        6.84:1   PASSES
       Ink    on Gold       6.84:1   PASSES - the Gold CTA is a FILL with Ink text
       Stone  on Ink        7.44:1   PASSES - Stone is a dark-band text colour

   So Cedar, the accent for this surface, lives in graphical elements (rules,
   chips, focus rings, the motif) where 3:1 suffices, and never as small text.
   =========================================================================== */

/* --- self-hosted fonts ------------------------------------------------------
   Served from our own origin on purpose. A font-CDN call is a third-party data
   flow that would fire before the consent decision on a page carrying a consent
   banner. font-display:swap so text is readable before the file lands. */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500; /* variable file covers both */
  font-display: swap;
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}

:root {
  /* === 1. PALETTE - ratified solomon-brand values ======================== */
  --ds-ink: #181613;
  --ds-parchment: #F8F6F1;
  --ds-sand: #EAE6DC;
  --ds-stone: #ABA69A;
  --ds-gold: #C29A2B;
  --ds-blue: #2F4858;
  --ds-cedar: #6E7F5A;
  --ds-warn: #B0742C;
  --ds-error: #8C3B2E;

  /* Stone darkened along its own hue (42.4deg) and saturation (9.2%) to 39%
     lightness. Ratified by the operator 2026-08-20 because brand Stone is
     2.25:1 on Parchment and cannot carry text. This variant is 5.20:1 on
     Parchment and 4.51:1 on Sand. A tonal variant, not a new colour. */
  --ds-stone-ink: #6D675A;

  /* === 2. SEMANTIC - defaults are the light band ========================= */
  --surface: var(--ds-parchment);
  --text-body: var(--ds-ink);
  --text-muted: var(--ds-stone-ink);
  --accent-text: var(--ds-blue);      /* accent that is allowed to be small text */
  --accent-graphic: var(--ds-cedar);  /* rules, chips, focus rings, motif */
  --rule: var(--ds-sand);
  --rule-strong: var(--ds-stone-ink);

  /* The one Gold form: a fill with Ink text. Never gold text on light. */
  --cta-bg: var(--ds-gold);
  --cta-text: var(--ds-ink);

  /* === type - phi scale, 16 base, each step x1.618 ======================= */
  --font-head: 'Poppins', Arial, sans-serif;
  --font-body: 'Inter', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  --fs-xs: 0.75rem;      /* 12px - eyebrow, legal, captions */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lead: 1.125rem;   /* 18px */
  --fs-h3: 1.625rem;     /* 26px  = 16 x 1.618 */
  --fs-h2: 2.625rem;     /* 42px  = 26 x 1.618 */
  --fs-h1: 4.25rem;      /* 68px  = 42 x 1.618 */

  --lh-body: 1.618;      /* phi */
  --lh-head: 1.15;
  --tracking-eyebrow: 0.12em;

  /* === spacing - Fibonacci, phi in whole numbers ========================= */
  --sp-0: 0.1875rem;   /*  3px */
  --sp-1: 0.3125rem;   /*  5px */
  --sp-2: 0.5rem;      /*  8px */
  --sp-3: 0.8125rem;   /* 13px */
  --sp-4: 1.3125rem;   /* 21px */
  --sp-5: 2.125rem;    /* 34px */
  --sp-6: 3.4375rem;   /* 55px */
  --sp-7: 5.5625rem;   /* 89px */

  /* === layout ============================================================ */
  --wrap: 68.75rem;      /* 1100px */
  --measure: 40rem;      /* 640px - lead/prose cap */
  --measure-prose: 47.5rem; /* 760px */
  /* fr, not %. Percentages plus a gap total more than 100% and the columns
     push outside their container - measured 34px past the wrap before this
     was changed. fr distributes what is left AFTER the gap, so the ratio
     stays golden and the grid stays contained. */
  --golden-major: 61.8fr;
  --golden-minor: 38.2fr;

  --radius: 2px;         /* almost none - this brand is geometric, not soft */
  --border: 1px;
  --focus-width: 3px;
  --tap-min: 2.75rem;    /* 44px - WCAG 2.2 target size */

  /* === motion ============================================================ */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur: 180ms;

  /* === motif ============================================================= */
  --motif-opacity: 0.08;  /* brand rule: 6-12%, one per section, line work only */
}

/* --- band contexts ----------------------------------------------------------
   A band repoints the semantic tokens. Components never ask what band they are
   in; they just use --text-body and get an AA-passing value either way. */

.band-parchment {
  --surface: var(--ds-parchment);
  --text-body: var(--ds-ink);
  --text-muted: var(--ds-stone-ink);
  --accent-text: var(--ds-blue);
  --accent-graphic: var(--ds-cedar);
  --rule: var(--ds-sand);
  --rule-strong: var(--ds-stone-ink);   /* 5.20:1 - input borders are UI boundaries */
}

.band-sand {
  --surface: var(--ds-sand);
  --text-body: var(--ds-ink);
  --text-muted: var(--ds-stone-ink);
  --accent-text: var(--ds-blue);
  --accent-graphic: var(--ds-cedar);
  --rule: var(--ds-parchment);
  --rule-strong: var(--ds-stone-ink);   /* 4.51:1 on sand */
}

.band-ink {
  --surface: var(--ds-ink);
  --text-body: var(--ds-parchment);
  --text-muted: var(--ds-stone);      /* 7.44:1 on ink - passes here */
  --accent-text: var(--ds-gold);      /* 6.84:1 on ink - passes here */
  --accent-graphic: var(--ds-cedar);
  --rule: var(--ds-stone-ink);
  --rule-strong: var(--ds-stone);
}

/* Dark-mode note: solomon-brand inverts the foundation only. This site is
   band-composed rather than theme-switched - .band-ink IS the dark surface -
   so there is no prefers-color-scheme override. Bands carry the contrast. */