/* ==========================================================================
   BRAND TOKENS — the only place a colour, face or type size is defined.
   Every value here comes from raj-maru-brand-guidelines.md v0.1.
   Do not hardcode a hex value, font name or size anywhere else in this
   codebase. If you need a value that isn't here, the guidelines need
   updating first — that's a deliberate speed bump, not an oversight.
   ========================================================================== */

/* --- Fonts. Two families, two files, Latin subset only (guidelines §5) ---- */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-700-800-latin.woff2') format('woff2');
  font-weight: 700 800;          /* variable range */
  font-stretch: 112%;            /* Semi Expanded, per guidelines §5 */
  font-style: normal;
  font-display: swap;
  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: 'Source Sans 3';
  src: url('/assets/fonts/SourceSans3-400-latin.woff2') format('woff2');
  font-weight: 400 600;          /* variable range covers both weights used */
  font-style: normal;
  font-display: swap;
  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;
}

:root {

  /* --- Colour (guidelines §4). Names match the guidelines exactly. ------- */

  --navy:     #14265E;   /* Pavilion Navy — backgrounds, headers, footers   */
  --red:      #C8102E;   /* Seam Red — drift line, links. Used sparingly.   */
  --gold:     #F5C400;   /* Bail Gold — CTAs on navy, fills. NEVER text     */
                         /* on white: it fails contrast badly (§4).         */
  --whites:   #F7F5F1;   /* Page background — warmer than pure white        */
  --ink:      #1B1B1F;   /* Body text on light backgrounds                  */
  --overcast: #6B6F7B;   /* Secondary text, captions, metadata              */

  /* PROPOSED ADDITION — not yet in the guidelines. Cards and form inputs need
     a surface that sits slightly above the Whites page background; without it
     a card is invisible and has to be carried by a border alone. Pure white
     against Whites gives a quiet lift and no new hue.
     Chris: this needs your agreement, then guidelines §4 needs updating. */
  --surface:  #FFFFFF;

  /* Derived tints. Navy at reduced opacity for hairlines and card edges —
     not new colours, just the palette at lower strength. */
  --navy-08:  rgba(20, 38, 94, 0.08);
  --navy-16:  rgba(20, 38, 94, 0.16);
  --white-70: rgba(247, 245, 241, 0.72);   /* secondary text on navy        */

  /* --- Type (guidelines §5) --------------------------------------------- */

  --face-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --face-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Mobile-first sizes; desktop values applied in the media query below.
     Body never drops below 17px on mobile (§5). */
  --size-headline: 32px;   --lh-headline: 1.1;
  --size-section:  24px;   --lh-section:  1.15;
  --size-subhead:  19px;   --lh-subhead:  1.25;
  --size-body:     17px;   --lh-body:     1.6;
  --size-small:    15px;   --lh-small:    1.45;
  --size-label:    16px;   --lh-label:    1;

  --track-headline: -0.02em;
  --track-label:     0.06em;

  /* --- Space, radius, layout -------------------------------------------- */

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;

  --radius: 8px;                 /* buttons, cards (guidelines §10)         */
  --measure: 65ch;               /* caps line length (§5)                   */
  --page-max: 1120px;
  --gutter: 20px;
  --tap-min: 48px;               /* minimum tap target (§10)                */
}

@media (min-width: 800px) {
  :root {
    --size-headline: 56px;   --lh-headline: 1.05;
    --size-section:  36px;   --lh-section:  1.1;
    --size-subhead:  22px;
    --size-body:     18px;
    --gutter: 32px;
  }
}