/*
 * Wordnerds design tokens
 * Source of truth: ../production-css-spec.md (Ray's spec — the actual production CSS values)
 * Earlier reference: ../brand-identity-draft.md (extracted from screenshots; superseded where it conflicts)
 * Drop into Astro's global.css when the site is scaffolded; works standalone too.
 */

:root {
  /* — Primary brand — */
  --wn-brand-yellow:       #FAB316;  /* production CSS — supersedes the #FFBE00 in the XD extract */
  --wn-off-black:          #222222;  /* chrome: navbar, sidebar, footers — never pure black */

  /* — Greys (full production ladder) — */
  --wn-dark-grey:          #444444;  /* body text, icons, hover states */
  --wn-mid-grey:           #707070;  /* secondary text */
  --wn-light-mid-grey:     #7A7A7A;  /* muted labels, placeholder text */
  --wn-menu-grey:          #555555;  /* sidebar separators */
  --wn-border-grey:        #b9b9b9;  /* borders, dividers */
  --wn-off-black-muted:    #bfbfbf;  /* dividers on dark backgrounds */
  --wn-background-grey:    #EEEEEE;  /* page background */
  --wn-light-grey:         #EAF0F4;  /* card footers, form backgrounds, cool surface */
  --wn-lighter-grey:       #f8f8f8;  /* card backgrounds */
  --wn-lightest-grey:      #fafafa;  /* elevated surfaces, modals */
  --wn-white:              #FFFFFF;

  /* — Pure black is rare — kept for true-black moments only — */
  --wn-black:              #000000;

  /* — Sentiment palette (RESERVED for sentiment in data viz only) — */
  --wn-sent-very-happy:    #6BB32D;  /* very positive */
  --wn-sent-happy:         #95C11F;  /* mildly positive */
  --wn-sent-neutral:       #CFD9DF;  /* neutral (production value — supersedes #BABABA) */
  --wn-sent-sad:           #EA752B;  /* mildly negative — Ray's "sad orange" */
  --wn-sent-angry:         #E94C1E;  /* very negative — Ray's "angry red" */

  /* — Social / functional accents — */
  --wn-facebook-blue:      #3b5998;
  --wn-twitter-blue:       #1DA1F2;
  --wn-brand-blue:         #39B8E1;  /* "Automated Cluster Blue" — used as info accent */

  /* — Semantic shortcuts — */
  --wn-primary:            var(--wn-brand-yellow);
  --wn-link:               var(--wn-brand-yellow);
  --wn-text:               var(--wn-dark-grey);
  --wn-text-muted:         var(--wn-mid-grey);

  /* — Brand blue intensity ramp (heat maps, volume viz) — */
  --wn-blue-0:             #EEEEEE;
  --wn-blue-1:             #A1E2F8;
  --wn-blue-2:             #39B8E1;
  --wn-blue-3:             #2B59C3;
  --wn-blue-4:             #001545;

  /* — Type families —
     Museo Sans = default body / regular text.
     Museo Sans Rounded = RESERVED for display: headings, sidebar labels, card headers, login hero. */
  --wn-font-regular:  'Museo Sans', 'Museo Sans Rounded', 'Nunito', system-ui, sans-serif;
  --wn-font-rounded:  'Museo Sans Rounded', 'Museo Sans', 'Nunito', 'Quicksand', system-ui, sans-serif;

  /* — Type scale (Bulma-style tokens used in production) — */
  --wn-size-1:        2.35rem;  /* large display headings (sidebar h1, login hero) */
  --wn-size-3:        2rem;     /* card header titles */
  --wn-size-4:        1.31rem;  /* sidebar section labels */
  --wn-size-5:        1.125rem; /* body copy, topic text, league table rows */
  --wn-size-6:        1rem;     /* base body */
  --wn-size-7:        0.85rem;  /* fine print, card footers, metadata */

  /* — Fluid type scale — website / marketing surfaces only —
     Utopia methodology: 18px→20px base, ratio 1.2→1.25, viewport 375–1440px.
     Use these for all new website components. --wn-size-* tokens above remain
     for product UI until Phase 3 consolidation. */
  --fs-xs:   clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8000rem);  /* 12.5→12.8px  fine print */
  --fs-sm:   clamp(0.9375rem, 0.9119rem + 0.1136vw, 1.0000rem);  /* 15→16px       caption */
  --fs-base: clamp(1.1250rem, 1.0739rem + 0.2273vw, 1.2500rem);  /* 18→20px       body */
  --fs-md:   clamp(1.3500rem, 1.2631rem + 0.3864vw, 1.5625rem);  /* 21.6→25px     H4 / overline */
  --fs-lg:   clamp(1.6200rem, 1.4837rem + 0.6057vw, 1.9531rem);  /* 25.9→31.3px   H3 */
  --fs-xl:   clamp(1.9440rem, 1.7405rem + 0.9044vw, 2.4414rem);  /* 31.1→39.1px   H2 */
  --fs-2xl:  clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);  /* 37.3→48.8px   H1 */
  --fs-3xl:  clamp(2.7994rem, 2.3840rem + 1.8461vw, 3.8147rem);  /* 44.8→61.0px   hero */

  /* — Spacing scale (Bulma-style $spacers) — retained for product UI —*/
  --wn-space-0:       0;
  --wn-space-1:       0.125rem;
  --wn-space-2:       0.25rem;
  --wn-space-3:       0.5rem;
  --wn-space-4:       1rem;
  --wn-space-5:       1.5rem;
  --wn-space-6:       2rem;
  --wn-space-7:       2.5rem;
  --wn-space-8:       3rem;
  --wn-space-9:       3.5rem;
  --wn-space-10:      4rem;

  /* — Global content gap (product UI / backwards-compat; ~= --space-m at desktop) — */
  --wn-gap:           30px;

  /* — Fluid space scale — website / marketing surfaces only —
     Utopia methodology: base 18px→20px, effective range 360→1240px.
     Steps are multiples of the base (×0.25, ×0.5, ×0.75, ×1, ×1.5, ×2, ×3, ×4, ×6).
     One-up pairs span adjacent steps — clamp transitions faster, useful for layouts.
     Use these for all new website components. --wn-space-* above stays for product UI. */

  /* Steps */
  --space-3xs:    clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);    /* 5px static    hairline */
  --space-2xs:    clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem); /* 9→10px        icon pad */
  --space-xs:     clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem); /* 14→15px       small pad */
  --space-s:      clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);   /* 18→20px       base unit */
  --space-m:      clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem); /* 27→30px       card/grid gap */
  --space-l:      clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);     /* 36→40px       component margin */
  --space-xl:     clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);   /* 54→60px       section spacer */
  --space-2xl:    clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);        /* 72→80px       section padding */
  --space-3xl:    clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);     /* 108→120px     hero / generous */

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);  /* 5→10px   */
  --space-2xs-xs:  clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem); /* 9→15px   */
  --space-xs-s:    clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);    /* 14→20px  */
  --space-s-m:     clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);   /* 18→30px  */
  --space-m-l:     clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);    /* 27→40px  */
  --space-l-xl:    clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);     /* 36→60px  */
  --space-xl-2xl:  clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);       /* 54→80px  */
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);       /* 72→120px */

  /* — Radii (rounded everything — hard corners are rare and deliberate) — */
  --wn-radius-sm:        6px;      /* rule builder, small chips */
  --wn-radius-md:        1rem;     /* logic pills, rule rows */
  --wn-radius-card:      1.5rem;   /* cards + buttons — the workhorse radius */
  --wn-radius-input:     2rem;     /* form inputs — pill style */
  --wn-radius-input-lg:  3rem;     /* large form inputs */
  --wn-radius-pill:      999px;    /* full pill — emergency / specific cases */

  /* — Layout — */
  --wn-content-max:   1280px;      /* main content wrapper max-width */
  --wn-navbar-height: 80px;        /* desktop; scales to 70px tablet, 60px mobile */

  /* — Borders — */
  --wn-border-default: 1px solid var(--wn-border-grey);

  /* — Shadows (subtle, low-opacity — depth via shadow not hard borders) — */
  --wn-shadow-card:   0 2px 20px 0 rgba(0,0,0,0.1);
  --wn-shadow-pop:    0 4px 12px rgba(0,0,0,0.12);

  /* — Motion — */
  --wn-motion-fast:     0.3s;
  --wn-motion-base:     0.4s ease-in-out;
  --wn-motion-slow:     0.5s ease-in-out;
}

/*
 * Backwards-compat aliases — names used by the first pass of components/*.html
 * before Ray's production CSS was reconciled (2026-05-13). Kept so those files
 * continue to work without touching every component. Prefer the production
 * names above when authoring new components.
 */
:root {
  --wn-near-black:         var(--wn-off-black);     /* #222222 */
  --wn-grey:               var(--wn-dark-grey);     /* #444444 */
  --wn-soft-grey:          var(--wn-mid-grey);      /* #707070 */
  --wn-off-white:          var(--wn-background-grey); /* #EEEEEE */
  --wn-cool-bg:            var(--wn-light-grey);    /* #EAF0F4 */
  --wn-cool-grey:          var(--wn-sent-neutral);  /* #CFD9DF — was the same value already */
  --wn-mid-light:          var(--wn-off-black-muted); /* #BFBFBF */
  --wn-neutral-sentiment:  var(--wn-sent-neutral);  /* #CFD9DF — VALUE CHANGED from #BABABA */
  --wn-surface-sub:        var(--wn-lighter-grey);  /* #f8f8f8 — VALUE CHANGED from #F5F5F5 */

  --wn-sent-very-pos:      var(--wn-sent-very-happy);  /* #6BB32D */
  --wn-sent-pos:           var(--wn-sent-happy);       /* #95C11F */
  --wn-sent-neut:          var(--wn-sent-neutral);     /* #CFD9DF */
  --wn-sent-neg:           var(--wn-sent-sad);         /* VALUE CHANGED #F46035 → #EA752B */
  --wn-sent-very-neg:      var(--wn-sent-angry);       /* VALUE CHANGED #E13313 → #E94C1E */
}

/*
 * Production responsive base font size scaling — opt in via class on <html>
 * (matches platform behaviour). Marketing pages stay at 16px by default.
 *
 * To enable: <html class="wn-responsive-base">
 */
html.wn-responsive-base { font-size: 16px; }
@media (max-width: 1407px) { html.wn-responsive-base { font-size: 14px; } }
@media (max-width: 1023px) { html.wn-responsive-base { font-size: 12px; } }

/* Default font stack on the wrapper */
.wn { box-sizing: border-box; font-family: var(--wn-font-regular); color: var(--wn-dark-grey); }
.wn *, .wn *::before, .wn *::after { box-sizing: inherit; }