/* ============================================================
   Frost Science · design tokens
   Drop into themes/frost-science/assets/css/tokens.css
   Generate the TNEW override stylesheet from THIS FILE so the
   two systems cannot drift. Never redeclare a value downstream.
   ============================================================ */

:root {

  /* ---------- Ink. Navy carries all text. ---------- */
  --fs-text:              #16123F;  /* 17.61:1 on white */
  --fs-text-muted:        #3A3757;  /* secondary copy */
  --fs-text-quiet:        #5F5C79;  /* captions, labels. 6.38 white / 5.75 paper */
  --fs-text-placeholder:  #6F6C82;  /* active-field placeholders. 5.07 white / 4.57 paper.
                                       FAILS on #E8E6E1 (4.06) — never place it there */
  --fs-text-disabled:     #B9B6C4;  /* inactive components ONLY. 1.79:1 and
                                       intentionally exempt under WCAG 1.4.3.
                                       Do not "fix" this — the low contrast is the signal */
  --fs-text-inverse:      #FFFFFF;

  /* ---------- Surfaces ---------- */
  --fs-surface:           #FFFFFF;  /* cards, page ground */
  --fs-surface-alt:       #F8F7F5;  /* alternating sections */
  --fs-surface-paper:     #F4F3F0;  /* policy panels, quiet blocks */
  --fs-surface-deep:      #16123F;  /* heroes, CTA bands, footer */
  --fs-surface-canvas:    #E8E6E1;  /* review-canvas ground only. Darker than paper —
                                       inks measured on white or paper are NOT valid here */

  /* ---------- Brand primaries. Marks and large fills only. ---------- */
  --fs-green:   #15EB20;  /* Pantone 7488 · biology */
  --fs-orange:  #FF6B00;  /* Pantone 1505 · technology · THE action colour */
  --fs-blue:    #03CDFF;  /* Pantone 306 · aquarium & oceans */
  --fs-navy:    #16123F;
  --fs-purple:  #D870D4;  /* member */
  --fs-chartreuse: #D9E021;

  /* ---------- Tints. Large surfaces. Sanctioned by brand book p.15. ---------- */
  --fs-action-tint:     #FBEADF;  /* orange · ticket panels, hold timers */
  --fs-aquatic-tint:    #DCF2FA;  /* blue · aquarium, info, accessible programmes */
  --fs-available-tint:  #DFF3DC;  /* green · available dates, confirmation, free */
  --fs-limited-tint:    #EFF1D2;  /* chartreuse · few-left, advisories */
  --fs-member-tint:     #F2E6F1;  /* purple · every member surface */

  /* ---------- Inks. Small text on white. PENDING MUSEUM SIGN-OFF. ---------- */
  --fs-action-ink:      #C24E00;  /* 4.8:1 on white */
  --fs-aquatic-ink:     #0077A0;  /* 5.1:1 on white — use --fs-link-canvas on paper/canvas */
  --fs-available-ink:   #0B7A12;  /* 5.5:1 on white */
  --fs-member-ink:      #9E2F99;  /* 6.6:1 on white */
  --fs-error:           #8F2411;  /* deliberately unlike action orange */

  /* Link colour on non-white surfaces */
  --fs-link:            #0077A0;
  --fs-link-canvas:     #00688C;  /* 5.01 paper / 6.25 white */

  /* Softened accents for illustration fields and map markers */
  --fs-green-soft:  #7FDD8A;
  --fs-blue-soft:   #7CD3EE;
  --fs-orange-soft: #F0925A;
  --fs-purple-soft: #C08EBE;
  --fs-chart-soft:  #C9D14E;

  /* Sold out — neutral, never red */
  --fs-soldout-bg:      #E6E4DF;
  --fs-soldout-border:  #DCDAD4;

  /* ---------- Type ---------- */
  --fs-font-display: 'Space Grotesk', system-ui, sans-serif;  /* → Replica Std Bold */
  --fs-font-text:    'Archivo', system-ui, sans-serif;        /* → Replica Std */
  /* Replica Frost Stencil: Light and Regular only. There is no stencil bold.
     Reserved for ONE use — the "Did You Know?" label. Nothing breaks if it never lands. */

  --fs-h1:        clamp(2.375rem, 5vw, 4rem);   /* .98 line-height, -.03em */
  --fs-h2:        2.125rem;                      /* 1.1, -.02em */
  --fs-h3:        1.3125rem;
  --fs-body:      1.0625rem;                     /* 1.6 */
  --fs-body-sm:   0.9375rem;
  --fs-ui:        1rem;                          /* 16px — form control floor */
  --fs-caption:   0.8125rem;
  --fs-eyebrow:   0.75rem;                       /* 700, .16em, uppercase */

  /* Prices and any tabular figure */
  --fs-numeric: tabular-nums;

  /* ---------- Space · 4pt scale ---------- */
  --fs-space-1: 4px;
  --fs-space-2: 8px;
  --fs-space-3: 12px;
  --fs-space-4: 16px;
  --fs-space-5: 22px;
  --fs-space-6: 32px;
  --fs-space-7: 44px;

  /* ---------- Radius ---------- */
  --fs-radius-sm: 8px;   /* controls */
  --fs-radius-md: 12px;  /* cards */
  --fs-radius-lg: 14px;  /* panels */
  --fs-radius-pill: 999px;

  /* ---------- Controls ---------- */
  --fs-control-height: 48px;
  --fs-control-border: 2px;
  --fs-target-min: 44px;   /* 48px on the purchase path */
  --fs-focus: 3px solid #16123F;
  --fs-focus-offset: 3px;

  /* ---------- Motion ---------- */
  --fs-motion: 160ms;
  --fs-ease: cubic-bezier(.2,.6,.2,1);

  /* ---------- Layout ---------- */
  --fs-content-max: 1280px;
  --fs-measure: 70ch;
}

/* Breakpoints (for reference — use in media queries, not as custom properties)
   320px  hard floor, everything must work here
   375px  mobile design target
   768px  two columns appear
   1024px sidebars and sticky summaries
   1280px max content width, centred beyond                                    */

@media (prefers-reduced-motion: reduce) {
  :root { --fs-motion: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* Links must be defined even before the site has any, or they render browser blue */
a { color: var(--fs-link); text-underline-offset: 3px; }
a:hover { color: var(--fs-text); }

/* Focus ring is identical on every surface in the palette */
:focus-visible { outline: var(--fs-focus); outline-offset: var(--fs-focus-offset); }