/* ==========================================================================
   Sac CSL — Centerly · TOKENS (the Brand Kit layer)
   --------------------------------------------------------------------------
   Structure mirrors the Centerly design-system brief: everything the public
   site paints with is a custom property here, so the Brand Kit can rewrite a
   handful of values and re-theme the entire site coherently.

   Three shipped directions, chosen by a body class written in PHP:
     .sc-dir-a  Valley Light      — tule-fog morning, sage + low amber sun
     .sc-dir-b  Precedes Form     — night sky, aurora teal + ember
     .sc-dir-c  The Almanac       — two-ink press, marine + poppy on oat

   Inline overrides written by the Brand Kit land in a <style> tag AFTER this
   file, so they win without !important.
   ========================================================================== */

:root {
  /* ---- structural tokens (shared by every direction) ---- */
  --sc-sp-1: 4px;   --sc-sp-2: 8px;   --sc-sp-3: 12px;  --sc-sp-4: 16px;
  --sc-sp-6: 24px;  --sc-sp-8: 32px;  --sc-sp-12: 48px; --sc-sp-16: 64px;
  --sc-sp-24: 96px; --sc-sp-32: 128px;

  --sc-r-sm: 8px; --sc-r-md: 12px; --sc-r-lg: 18px; --sc-r-xl: 26px; --sc-r-pill: 999px;

  --sc-t-fast: 120ms; --sc-t-base: 220ms; --sc-t-slow: 340ms; --sc-t-reveal: 900ms;
  --sc-ease: cubic-bezier(.2, .7, .2, 1);

  --sc-measure: 65ch;
  --sc-wrap: 1140px;

  /* type scale — base 16, ~1.25 */
  --sc-fs-xs: .75rem;  --sc-fs-sm: .875rem; --sc-fs-md: 1rem;
  --sc-fs-lg: 1.25rem; --sc-fs-xl: 1.75rem; --sc-fs-2xl: 2.5rem;
  --sc-fs-hero: clamp(2.6rem, 7.4vw, 6rem);
  --sc-fs-h2:   clamp(2rem, 4.4vw, 3.3rem);
  --sc-fs-h3:   clamp(1.2rem, 2vw, 1.5rem);

  /* status — reserved, never reused as a decorative accent */
  --sc-good: #2E9E6B; --sc-warning: #E0A93B; --sc-critical: #D0503F;

  /* motion escape hatch: JS sets this to 0 when reduced motion is requested */
  --sc-motion: 1;
}

/* ------------------------------------------------------------------ A ---- */
.sc-dir-a {
  --sc-bg:        #E7EDEA;   /* valley mist */
  --sc-bg-2:      #F4F7F5;
  --sc-surface:   #FBFAF6;   /* warm paper */
  --sc-surface-2: #FFFFFF;
  --sc-line:      #D3DCD8;
  --sc-line-soft: #E4EAE7;

  --sc-ink:       #0E2B28;   /* deep pine */
  --sc-ink-2:     #3B4B47;
  --sc-ink-mute:  #5C6B66;

  --sc-primary:      #1F6F63;
  --sc-primary-hover:#17564C;   /* light UI reads "raised" as darker */
  --sc-primary-deep: #145047;
  --sc-primary-soft: #E1EDEA;
  --sc-on-primary:   #F7FBF9;

  --sc-accent:       #C97B2E;
  --sc-accent-hover: #B06A22;
  --sc-accent-soft: #F6E6D2;
  --sc-on-accent:   #22160A;

  --sc-invert-bg:   linear-gradient(160deg, #123B36 0%, #0E2B28 62%, #1A4038 100%);
  --sc-invert-ink:  #EAF3F0;
  --sc-invert-mute: rgba(234, 243, 240, .76);
  --sc-invert-line: rgba(234, 243, 240, .22);

  --sc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sc-font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sc-font-mono:    'Plus Jakarta Sans', system-ui, sans-serif;

  --sc-display-weight: 300;
  --sc-display-track:  -.035em;
  --sc-h2-weight:      400;
  --sc-btn-radius:     var(--sc-r-pill);
  --sc-card-radius:    var(--sc-r-lg);
  --sc-shadow-1: 0 1px 2px rgba(14, 43, 40, .06);
  --sc-shadow-2: 0 16px 40px rgba(14, 43, 40, .09);
  --sc-shadow-3: 0 24px 60px rgba(14, 43, 40, .14);
  --sc-hero-canvas: fog;
}

/* ------------------------------------------------------------------ B ---- */
.sc-dir-b {
  /* Keyed to Sac CSL's own brand blues, sampled from their logo:
     #006CB4 the script, #B4CCE4 the ray burst. On a near-black ground #006CB4
     only reaches ~3.4:1, so the interactive blue is lifted to #4FA3E8 (AA for
     body text) and their #006CB4 becomes the deep/hover step.
     The warm accent is not invented — it is the gold out of their own banner
     photograph, which is the one warm note their brand already carries. */
  --sc-bg:        #070E17;
  --sc-bg-2:      #0C1723;
  --sc-surface:   rgba(255, 255, 255, .05);
  --sc-surface-2: rgba(255, 255, 255, .08);
  --sc-line:      rgba(150, 190, 230, .17);
  --sc-line-soft: rgba(150, 190, 230, .09);

  --sc-ink:       #E6EEF6;
  --sc-ink-2:     #C2D2E2;
  --sc-ink-mute:  #93A6B8;

  --sc-primary:      #4FA3E8;
  --sc-primary-hover:#76BAF0;   /* lighter on hover — dark UI reads "raised" as brighter */
  --sc-primary-deep: #006CB4;
  --sc-primary-soft: rgba(79, 163, 232, .15);
  --sc-on-primary:   #04121F;

  --sc-accent:       #E8A33D;
  --sc-accent-hover: #F4B75C;
  --sc-accent-soft:  rgba(232, 163, 61, .16);
  --sc-on-accent:    #23180A;

  --sc-invert-bg:   radial-gradient(80% 100% at 50% 0%, #113052 0%, #070E17 70%);
  --sc-invert-ink:  #E6EEF6;
  --sc-invert-mute: #A6BACE;
  --sc-invert-line: rgba(150, 190, 230, .20);

  --sc-font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --sc-font-body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sc-font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sc-display-weight: 700;
  --sc-display-track:  -.045em;
  --sc-h2-weight:      600;
  --sc-btn-radius:     var(--sc-r-md);
  --sc-card-radius:    var(--sc-r-xl);
  --sc-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sc-shadow-2: 0 18px 46px rgba(0, 0, 0, .45);
  --sc-shadow-3: 0 10px 34px rgba(79, 163, 232, .34);
  --sc-hero-canvas: field;
}

/* ------------------------------------------------------------------ C ---- */
.sc-dir-c {
  --sc-bg:        #FAF6EC;   /* oat */
  --sc-bg-2:      #F2ECDD;
  --sc-surface:   #FFFFFF;
  --sc-surface-2: #FAF6EC;
  --sc-line:      #D8CFBB;
  --sc-line-soft: #E7E0CF;

  --sc-ink:       #17364F;   /* marine ink */
  --sc-ink-2:     #3E4A47;
  --sc-ink-mute:  #6B6455;

  --sc-primary:      #DE4E26;
  --sc-primary-hover:#C43F1B;   /* poppy — the second ink */
  --sc-primary-deep: #17364F;
  --sc-primary-soft: #FAE3D9;
  --sc-on-primary:   #FAF6EC;

  --sc-accent:       #7E9578;
  --sc-accent-hover: #6B8265;   /* sage — the third pull */
  --sc-accent-soft: #E6EBE2;
  --sc-on-accent:   #17364F;

  --sc-invert-bg:   #17364F;
  --sc-invert-ink:  #FAF6EC;
  --sc-invert-mute: rgba(250, 246, 236, .72);
  --sc-invert-line: rgba(250, 246, 236, .3);

  --sc-font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sc-font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --sc-font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sc-display-weight: 400;
  --sc-display-track:  -.028em;
  --sc-h2-weight:      400;
  --sc-btn-radius:     0;
  --sc-card-radius:    0;
  --sc-shadow-1: none;
  --sc-shadow-2: 4px 4px 0 var(--sc-primary);
  --sc-shadow-3: 6px 6px 0 var(--sc-ink);
  --sc-hero-canvas: none;
}

/* Reduced motion is a token-level decision, not a per-rule one. */
@media (prefers-reduced-motion: reduce) {
  :root { --sc-motion: 0; --sc-t-reveal: 1ms; --sc-t-base: 1ms; --sc-t-slow: 1ms; }
}