/* ==========================================================================
   Winchevsky Centre - Design Tokens
   One shared system. Per-org accents swap via [data-org] (Elementor: global
   styles + Theme Builder display conditions later).
   ========================================================================== */

:root {
  /* ---- Paper / ink (shared neutral base) -------------------------------- */
  --paper:        #f6f3ec;   /* warm off-white (cards/wells stay this) */
  --on-dark:      var(--paper);   /* text on --ink grounds; was referenced but never defined */
  --page-bg:      #f6f3ec;   /* page background - tinted per branch below */
  --paper-2:      #efeae0;   /* slightly deeper panel */
  --paper-3:      #e7e0d2;   /* cards / wells */
  --mount:        #f4efe3;   /* the one paper-mount value every framed print/
                                 poster/card object uses - was hand-typed as
                                 #f4efe3/#f4efe6/#efe9db in different places */
  --grain:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
                              /* the one paper-grain texture every framed print
                                 uses - was --arch-grain, scoped to .archive
                                 only, so .sigs__print/.founder__print/
                                 .single__sleeve (none of them under .archive)
                                 silently rendered no grain at all */
  --ink-dark:     #231512;   /* the one warm dark - text, dark bands, dark surfaces
                                (2026-07-14 token pass: unified the drifting
                                content darks #1a1814/#2a2620 onto this. The
                                footer coal gradient and the cinema cover-black
                                stay their own named surfaces - they're gradient
                                partners, not drift.) */
  --ink:          var(--ink-dark);   /* was #1a1814 */
  --ink-2:        #443f37;   /* secondary text */
  --ink-3:        #5c5647;   /* muted / meta */
  --line:         #d8cfbd;   /* hairlines */
  --line-strong:  #c3b8a1;

  /* ---- Default accent (overridden per org) ----------------------------- *
   * Rebrand palette: Naivelt green · Morris Winchevsky gold · UJPO red.
   * --accent is the AA-readable text/UI tone; --accent-bright is the vivid
   * brand colour for large fills & illustration washes.                    */
  --accent:        #9e2419;  /* readable red (Centre default) */
  --accent-bright: #d8392b;  /* vivid brand red */
  --accent-ink:    #fbf7ef;  /* text on accent */
  --accent-soft:   rgba(216, 57, 43, 0.10);

  /* ---- Centennial palette (sampled from the 100th booklet cover) -------- */
  --gold:        #e8c994;  /* the cover's antique-gold title colour */
  --gold-deep:   #c9a85f;  /* deeper brass - frames, rules */
  --cover-black: #16120f;  /* the cover's warm near-black ground */

  /* ---- Section shade variants ------------------------------------------- *
   * Each section can sit on its own shade of the branch background instead of
   * one flat colour. These re-resolve per [data-org] because they mix the
   * cascading --accent into the cascading --page-bg.                         */
  --bg-tint:   color-mix(in srgb, var(--accent) 5%, var(--page-bg));   /* whisper */
  --bg-tint-2: color-mix(in srgb, var(--accent) 9%, var(--page-bg));   /* soft well */
  --bg-tint-3: color-mix(in srgb, var(--accent) 15%, var(--page-bg));   /* deeper band */
  --bg-ink:    color-mix(in srgb, var(--accent) 22%, var(--ink));       /* dark, branch-warmed */

  /* ---- Typography ------------------------------------------------------- *
   * Newsreader - a warm, text-first editorial serif with optical sizing and
   * lower stroke contrast, so it stays sturdy (no hairline glitches) at
   * display sizes. Folksy and literary rather than corporate.               */
  --font-display: "Newsreader", "Tiempos Headline", Georgia, "Times New Roman", serif;
  --font-sans:    "Mulish", "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-hand:    "Caveat", "Bradley Hand", cursive;   /* gallery captions, marginalia */
  --font-hebrew:  "Frank Ruhl Libre", "Times New Roman", serif;   /* Yiddish script (Hebrew alphabet) */

  /* Fluid type scale (1.250 major-third, clamped) */
  /* --step--2 is the micro-caps step: mono eyebrows, table labels, footer
     headings. Before it existed, every such label hand-rolled a size between
     0.55 and 0.74rem (40+ raw declarations). New code uses this; the Phase 2
     sweep migrates the existing ones. */
  --step--2: clamp(0.66rem, 0.64rem + 0.10vw, 0.72rem);
  --step--1: clamp(0.90rem, 0.87rem + 0.15vw, 0.98rem);
  --step-0:  clamp(1.0625rem, 1.00rem + 0.25vw, 1.19rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.40rem + 1.00vw, 2.30rem);
  --step-3:  clamp(2.05rem, 1.65rem + 2.00vw, 3.40rem);
  --step-4:  clamp(2.60rem, 1.90rem + 3.40vw, 5.00rem);
  --step-5:  clamp(3.20rem, 2.00rem + 6.00vw, 7.50rem);

  /* The hero/page-title headline. Normalised 2026-07-13 to one capped ramp
     (44-48px desktop, 38px floor) so every H1 across the site is one size and
     always larger than the 32px H2 - the old ramp (up to 57.6px, floor 33.6px)
     dipped below the H2 at narrow widths, inverting the hierarchy on mobile. */
  --hero-title: clamp(2.4rem, 3.5vw, 3rem);

  /* Utility strip + nav, measured: 33px + 89px. The hero subtracts it so header
     and hero together are exactly one screen. */
  --header-h: 7.7rem;

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.62;
  --tracking-tight: -0.02em;
  --tracking-caps:  0.14em;

  /* ---- Spacing scale ---------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;
  --sp-10: 10rem;

  /* Uniform vertical padding for every .section band, so section-to-section
     gaps are identical down the whole page (consistent flow). */
  --section-y: clamp(3.5rem, 4.5vw, 5rem);

  /* ---- Layout ----------------------------------------------------------- */
  /* Two content widths, site-wide: one centered frame for everything (heroes,
     sections, cards, galleries, two-column blocks) and one centered prose width
     for long text-only passages. --pad keeps content off the edge on small
     screens. --gutter is the HEADER/FOOTER inset only - left unchanged. */
  --content: 1280px;                     /* the one centered content frame */
  --measure: 46rem;                      /* centered prose width (~736px) */
  --pad: clamp(20px, 5vw, 48px);         /* responsive side gutter for content */
  --container: 78rem;
  --container-wide: 90rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 2px;        /* editorial = nearly square */
  --radius-lg: 6px;
  --radius-band: var(--radius-lg);  /* contained callout/CTA bands share the one large radius (Erf, 2026-09-21) */
  --bg-card: #efeae0;   /* neutral card panel ground (== --paper-2) */

  /* ---- Named page/accent tokens (design-token pass 2026-07-14) ----------- *
   * Page grounds and per-org accents named explicitly. The bg-page-* match
   * the per-org --page-bg blocks below; the accent-* are the AA-readable org
   * accents (Naivelt reconciled onto the one green #3E7B32, retiring #3D6B2E). */
  --bg-page:         var(--paper);   /* #f6f3ec */
  --bg-page-naivelt: #edf2e8;
  --bg-page-mws:     #eaeff5;
  --bg-page-ujpo:    #f8f3e0;
  --accent-naivelt:  #3E7B32;
  --accent-mws:      #8a6500;
  --accent-ujpo:     #9e2419;
  /* Section rhythm (mockup scale) - available to new layouts; existing
   * sections keep their own --section-y until migrated deliberately. */
  --space-band-pad:       88px;

  /* ---- Dark instrument surfaces ----------------------------------------- *
   * The cassette, turntable, footer and other "device" components share a
   * near-black warm family that predates these tokens. The recurring values
   * are named here; gradient one-offs migrate in the component pass.         */
  --coal-1: #211812;   /* footer top, lightest of the family */
  --coal-2: #16100b;   /* footer mid ground */
  --coal-3: #0c0907;   /* device wells */
  --coal-4: #0b0807;   /* deepest edges */

  /* ---- Org identity colours as fixed values ------------------------------ *
   * For elements coloured by WHICH org a thing belongs to (calendar dots,
   * search-result edges, archive/staff/choice cards, spotlight accents)
   * regardless of the page's own cascade. Values match
   * mockups/design-system.html (the canonical reference) - this used to
   * hold a brighter shade that only calendar dots/search edges wanted,
   * while everything else hand-typed this same deep colour separately;
   * this is now the one place it's defined.                               */
  --org-naivelt: #3E7B32;
  --org-mws:     #B8860B;
  --org-ujpo:    #9E2419;

  /* ---- Platform brand colours (external identities, not ours) ------------ */
  --brand-spotify:  #1db954;
  --brand-youtube:  #ff0000;
  --brand-facebook: #1877f2;
  --brand-instagram: #e1306c;

  /* ---- Canonical breakpoints --------------------------------------------- *
   * CSS variables cannot be used inside @media, so this is a convention, not
   * a token: new media queries use 600px / 880px / 1200px unless a component
   * measurably needs its own. The 20 historical widths migrate in Phase 7.   */

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-ish, premium */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 720ms;
  --dur-4: 1100ms;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(26,24,20,0.05), 0 4px 14px rgba(26,24,20,0.05);
  --shadow-2: 0 10px 30px rgba(26,24,20,0.10), 0 2px 8px rgba(26,24,20,0.06);

  --z-nav: 100;
  --z-overlay: 200;

  /* ---- Consolidated --wc-* token layer (2026-07-13) --------------------- *
   * A single, explicitly-named surface for the design system's core values,
   * introduced ahead of the site-wide consistency sweep. These mirror the
   * long-standing --paper/--ink/--accent-ink/--line-strong values and the
   * per-org --accent values above; the older names keep working untouched.
   * Consumers migrate onto these incrementally - defining them here changes
   * nothing on its own. */
  --wc-paper:          #f6f3ec;   /* = --paper */
  --wc-ink:            var(--ink-dark);   /* = --ink */
  --wc-paper-invert:   #fbf7ef;   /* = --accent-ink (text on dark) */
  --wc-border:         #c3b8a1;   /* = --line-strong */
  --wc-accent-centre:  #9e2419;   /* Centre red (also the UJPO accent) */
  --wc-accent-naivelt: var(--accent-naivelt);   /* = [data-org=naivelt] --accent (#3E7B32) */
  --wc-accent-mws:     #8a6500;   /* = [data-org=mws] --accent */
  --wc-radius:         2px;
  --wc-space-section:  96px;
  --wc-space-block:    48px;
  --wc-gap:            24px;
  --wc-ghost-border:   rgba(246, 243, 236, 0.55);
}

/* Tighter section rhythm on small screens (WP mobile breakpoint). */
@media (max-width: 781px) {
  :root { --wc-space-section: 56px; }
}

/* ---- Per-organization accent palettes (from the rebrand crests) -------- */
[data-org="naivelt"], .winx-org-naivelt {
  --accent:        var(--accent-naivelt);   /* AA leaf green, reconciled to #3E7B32 (was #3d6b2e) */
  --accent-bright: #7cb342;          /* vivid Naivelt green */
  --accent-2:      #d99a2b;          /* amber sun */
  --accent-soft:   rgba(124, 179, 66, 0.14);
  --page-bg:       #edf2e8;          /* very faded green */
}
[data-org="mws"], .winx-org-mws {
  --accent:        #8a6500;          /* AA deep gold (text/UI) */
  --accent-bright: #f2c200;          /* vivid Morris Winchevsky yellow */
  --accent-2:      #c0392b;          /* book red from the crest */
  --accent-soft:   rgba(242, 194, 0, 0.16);
  --page-bg:       #eaeff5;          /* very faded blue */
}
/* UJPO shares the Centre's red BY DESIGN, not by oversight: red is the
 * labour-left / UJPO heritage colour and UJPO is the anchor org, so the
 * Centre default and the UJPO scope resolving to the same #9e2419 is
 * correct. Do not "fix" this to a distinct hue. (Decided 2026-07-13.) */
[data-org="ujpo"], .winx-org-ujpo {
  --accent:        #9e2419;          /* AA red (text/UI) - shared Centre/UJPO red, intentional */
  --accent-bright: #d8392b;          /* vivid UJPO red */
  --accent-2:      var(--ink-dark);
  --accent-soft:   rgba(216, 57, 43, 0.10);
  --page-bg:       #f8f3e0;          /* very faded yellow */
}

/* Honor user preference for less motion: neutralize transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms;
  }
}