/* ==========================================================================
   WNM Network: design tokens (the PorchOS token contract, #77; PORCH-WO-14c).
   ONE tokens file. Every color and font used by the site comes from here:
   - palette (--c-*): the brand colors, the only color literals on the site;
   - roles (--color-*): jobs (surface, text, accent, link, border, focus, …),
     each pointing at a palette color. Section CSS uses roles where the job
     fits, the palette where the brand choice is deliberate
     (PorchOS docs/next-site/wo14c/TOKEN-MAP.md);
   - fonts (--font-*).
   tokens.json lists the editable ones (label, group, default, fallback) and
   PorchOS tools/check-tokens.py keeps the two in step and the rest of the
   CSS literal-free. Shades are color-mix() of a token, never rgb()/hex.
   Fluid sizes interpolate linearly between 390px and 1440px viewports.
   ========================================================================== */

:root {
  /* ---- Editable base palette (WNM-WO-58b; nine colours) --------------- */
  --c-green:  #38b25f;
  --c-forest: #2b5d2d;
  --c-sage:   #647d6b;
  --c-ink:    #0f1311;
  --c-light:  #f6f6f6;
  --c-white:  #ffffff;
  --c-ochre:  #c8a24a;
  --c-national: #f6cf3a;
  --c-paper:  #f3f1ee;

  /* ---- Derived shades: follow the base colours; never controls -------- */
  --c-sage-deep: color-mix(in srgb, var(--c-sage) 90%, var(--c-ink));
  --c-green-hover: color-mix(in srgb, var(--c-green) 88%, var(--c-white));
  --c-green-light: color-mix(in srgb, var(--c-green) 80%, var(--c-white));
  --c-national-hover: color-mix(in srgb, var(--c-national) 88%, var(--c-white));
  --c-ink-muted: color-mix(in srgb, var(--c-ink) 68%, var(--c-paper));
  --c-light-muted: color-mix(in srgb, var(--c-light) 65.5%, var(--c-ink));

  /* WO-58 compatibility aliases, retained for one release. */
  --c-dark: var(--c-ink);
  --c-stone: var(--c-paper);
  --c-cream-muted: var(--c-light-muted);
  --c-cream: var(--c-light);
  --c-green-deep: var(--c-green);

  /* Utility, not a design color: a mask only reads alpha (footer texture), plus one photo shadow */
  --c-black: #000000;

  /* ---- Roles (the contract's standard set) ------------------------------ */
  --color-surface-1:    var(--c-paper);     /* the page */
  --color-surface-2:    var(--c-paper);     /* quiet tiles and bars on the page */
  --color-surface-3:    var(--c-ink);       /* dark cards, frames, mega panel, footer */
  --color-text-1:       var(--c-ink);       /* body text on light */
  --color-text-2:       var(--c-ink-muted); /* muted text on light */
  --color-text-3:       var(--color-text-2); /* reserved: no third level on WNM yet */
  --color-accent:       var(--c-green);     /* Network actions: buttons, selection, active marks */
  --color-on-accent:    var(--c-ink);       /* text and icons on an accent fill */
  --color-accent-hover: var(--c-green-hover);
  --color-link:         var(--c-forest);    /* inline text links on light */
  --color-border:       color-mix(in srgb, var(--c-ink) 12%, transparent);
  --color-focus:        var(--c-forest);    /* the default focus ring; sections may set --focus */

  /* ---- Roles (WNM's own) ------------------------------------------------ */
  --color-on-dark:        var(--c-light);
  --color-on-dark-muted:  var(--c-light-muted);
  --color-border-on-dark: color-mix(in srgb, var(--c-light) 12%, transparent);
  --color-scrim:          color-mix(in srgb, var(--c-ink) 45%, transparent);

  /* ---- Fonts (all OFL 1.1, self-hosted: fonts.css, assets/fonts/) ------ */
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Type scale (size + line-height), 390 → 1440 ----------------------- */
  --fs-display-xl: clamp(42px, 24.91px + 4.381vw, 88px);  --lh-display-xl: 0.96;
  --fs-display-l:  clamp(38px, 26.86px + 2.857vw, 68px);  --lh-display-l: 0.98;
  --fs-h2:         clamp(34px, 25.83px + 2.095vw, 56px);  --lh-h2: 1.02;
  --fs-display-m:  clamp(26px, 20.80px + 1.333vw, 40px);  --lh-display-m: 1.06;
  --fs-h3-list:    clamp(24px, 21.03px + 0.762vw, 32px);  --lh-h3-list: 1.14;
  --fs-h3:         clamp(20px, 18.51px + 0.381vw, 24px);  --lh-h3: 1.17;
  --fs-lead:       clamp(18px, 16.51px + 0.381vw, 22px);  --lh-lead: 1.45;
  --fs-body:       clamp(17px, 16.63px + 0.095vw, 18px);  --lh-body: 1.6;
  /* List + image pairings. RULE: in list + image pairings, the image sets the
     height; the list fits inside it (pattern: .pair in base.css). The list type
     steps down with the image (22px at 1024 → 28px at 1440) so its rows never
     overrun the photo. Stacked (<1024px) the lock is released and the list
     flows naturally at its section's own size. */
  --pair-list-size: clamp(20px, 7.23px + 1.442vw, 28px);
  --fs-small: 15px;   --lh-small: 1.47;
  --fs-menu:  18px;   --lh-menu: 1.44;
  --fs-nav:   13px;
  --fs-button: 15px;
  --fs-eyebrow: 12px;
  /* Existing camp-tag recipe, reused by Training facts. */
  --fs-tag: 11px; --lh-tag: 1.4; --tr-tag: 0.04em;
  --tag-pad-y: 3px; --tag-pad-x: 10px;
  /* Footer and 404 link lists share one type recipe. */
  --fs-linklist: 16px;
  --lh-linklist: 1.75;
  --fs-linklist-label: var(--fs-eyebrow);
  --lh-linklist-label: 1.33;

  --tr-display: -0.035em;
  --tr-heading: -0.03em;
  --tr-title: -0.018em;
  --tr-nav: 0.08em;
  --tr-eyebrow: 0.12em;

  /* ---- Space ------------------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
  /* ONE section rhythm (14au, #170/#172, Nolan's H3/O4): every section pads this much top and bottom; two plain sections in a row share
     ONE gap (stock.css section 1), never padding on top of padding or margin on top of padding. 112px at 1440 (Who We Are was 160, the
     default 128), 60px at 390. The editorial token is kept as an alias so older rules follow the same value. */
  --section-y: clamp(60px, 40.69px + 4.952vw, 112px);
  --section-y-editorial: var(--section-y);
  /* the gap under a call-to-action panel (inset or card) to whatever follows it: the same on every page (AU2) */
  --cta-gap: var(--section-y);

  /* ---- Rail, gutters, measure ------------------------------------------ */
  --rail-max: 1280px;
  --gutter: clamp(20px, 5.714vw - 2.29px, 80px);
  --rail: min(var(--rail-max), 100% - 2 * var(--gutter));
  --measure-body: 64ch;
  --measure-lead: 48ch;
  --measure-h2: 16em;
  --grid-gap: clamp(16px, 13.71px + 0.762vw, 24px);
  --panel-inset: clamp(8px, 2.06px + 1.524vw, 24px);
  --header-h: 76px;
  --header-float-h: 64px;
  --subnav-h: 56px; /* page sub-nav bar (About pages; subnav.css) */

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-tile: 20px;
  --r-lg: 24px;
  --r-xl: clamp(20px, 15.54px + 1.143vw, 32px);
  --r-pill: 999px;

  /* ---- Circles (14az, Nolan's H6): ONE icon-circle system. Every circle that holds an arrow, chevron, plus or close mark is
     small or medium; large is the decorative disc on a feature panel. Never a one-off width/height on a circle. */
  --circle-sm: 30px;     /* the small button's icon (.btn--sm), the sub-nav caret */
  --circle-md: 36px;     /* the standard: button icon, prev/next arrows, card-hover arrows, calendar nav, accordion toggle, clear/close */
  --circle-lg: 56px;     /* decorative disc (the Find a Church pin); not a control */
  --circle-glyph: 16px;  /* the arrow/chevron inside a small or medium circle */
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ONE ARROW (#197): the header sprite's #i-arrow as a mask, for circles drawn by a pseudo-element (painted in the circle's arrow colour) */
  --circle-turn: -30deg; /* the one arrow hover (button flow, #196): on hover/focus the arrow in a circle turns 30° up (← turns the mirror way); replaces 14bc's 3px nudge */
  /* ---- Link cards (14bc, C1/C2): one pattern for every set of link cards (joined grid, name left + circle arrow right). Same top and bottom padding
     everywhere, slimmer than the old thinnest (24px). */
  --linkcard-pad-y: 20px;
  --linkcard-pad-x: 24px;
  --linkcard-title-font: var(--font-display);
  --linkcard-title-size: var(--fs-h3);
  --linkcard-title-weight: 600;
  --linkcard-title-leading: var(--lh-h3);
  --linkcard-title-tracking: var(--tr-title);
  --linkcard-desc-font: var(--font-body);
  --linkcard-desc-size: var(--fs-small);
  --linkcard-desc-leading: var(--lh-small);
  --linkcard-desc-color: var(--color-text-2);
  --sheet-overlap: var(--r-xl); /* stone page sheet tucks over the hero */

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-float: 0 12px 40px -12px color-mix(in srgb, var(--c-ink) 35%, transparent);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --dur-flow: 520ms;     /* button flow (#196): the pill's circle slide and the arrow turn */
  --dur-reveal: 800ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-flow: cubic-bezier(0.32, 0.72, 0, 1); /* button flow (#196): the drawer curve, fast out, soft landing */
  --stagger: 70ms;
  /* Card accordion: soft flex-grow glide with a ~2% spring overshoot */
  --dur-accordion: 700ms;
  --ease-elastic: cubic-bezier(0.25, 1.25, 0.4, 1);
  --accordion-intent: 100ms; /* hover-intent delay; keyboard focus is immediate */
  /* Quick Links drawer: one slide from the right edge */
  --dur-drawer-in: 520ms;
  --dur-drawer-out: 320ms;
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Header / page sub-nav hand-off: both slide together with one timing */
  --dur-tuck: 420ms;
  --ease-tuck: cubic-bezier(0.32, 0.72, 0, 1);
  /* CTA variant "Ambient drift" (cta-ambient.css): one dial each.
     Intensity 0–1 scales the light fields' opacity (0 = a plain dark panel; 0.6 =
     staging's corner-glow strength; 1 = full, Nolan's pick 2026-09-26). Tempo multiplies every loop duration (2 = half
     speed). Demo only: ?ambient=0…1 overrides the intensity (js/cta-ambient.js). */
  --ambient-intensity: 1;
  --ambient-tempo: 1;
}

@media (max-width: 1023px) {
  :root { --header-h: 64px; --subnav-h: 52px; }
}

/* 14ar-3 (Nolan, 2026-10-02, chose "Pine and copper" at 30% with ChatGPT): the two colours only the aurora uses. FLAGGED for
   Nolan; not site brand colours, never for text, buttons or borders, fixed in tokens.json. Pine is a blue-leaning green, copper
   a warm orange; they give the aurora its cool / warm pair (the site green and ochre stay as they are). */
:root {
  --c-aurora-pine:   #429e89;
  --c-aurora-copper: #c87943;
}

/* WO-19: national-resource accent (APPROVED by Nolan 2026-09-26 17:32)
   Semantic rule (Nolan, 2026-09-26 17:01): green = Network-supplied resources and
   actions; yellow = national resources (programs the Network doesn't supply, e.g.
   royalrangers.ag.org). Added accent, not a brand colour. Used by the
   "National resource" CTA (css/sections/cta-national.css).
   Ink text on it: 12.40:1 (hover 13.01:1); also 12.40:1 as an edge/icon on Ink.
   Never as text or a thin line on Paper or Light (1.1–1.4:1).
   Distinct from --c-ochre (#c8a24a, the homepage events band): CIEDE2000 13.4,
   much brighter and more saturated (hsl 48 91% 60% vs 42 53% 54%). */
/* WO-23 (Nolan, 2026-09-26): the national CTA's "Aurora veil" background and the
   Statement list's hover intent. The veil is the yellow sibling of Ambient drift (green):
   a soft WebGL light field drawn from --c-national / --c-ochre / --c-ink
   (js/aurora-veil.js). Intensity 0–1 scales its light; tempo 2 = half speed.
   14ar (Aurora v2, R18): the same engine now runs every aurora / ambient background
   (aurora.css). Bold 0–1.5 scales the curtain folds' contrast and the bright ridges
   (0 = soft, no folds or ridges; 1 = the first, bolder 14ar look). Blur 0–1: how soft the bands
   are (1 = very soft, broad, drawn at quarter resolution).
   14ar-2 (Nolan, #165): "way more blurred … drop down the intensity a bit": defaults bold 0, blur 1;
   follow-up the same day (Nolan sent the shader-aurora-veil reference): broad bands across the whole panel.
   14ar-3 (Nolan, with ChatGPT): the look is "Pine and copper at 30%": the kernel from docs/next-site/wo14ar-3/chatgpt/, intensity 0.30
   (its coverage is linear in the dial, so 0.30 is the 30% he approved; the old engine's 0.85 no longer applies). The green closing panel never runs the engine. */
:root {
  --veil-intensity: 0.55;
  --veil-tempo: 1;
  --veil-bold: 0;
  --veil-blur: 1;
  --slist-intent: 220ms; /* hover-intent delay before a statement-list row opens */
}

@media (max-width: 480px) {
  :root { --fs-linklist-label: 11px; }
}

/* Mobile invitation rhythm: one owner per adjacency (2026-10-05). */
:root {
  --invitation-eyebrow-gap: 20px;
  --invitation-heading-gap: 40px;
  --invitation-action-gap: var(--s-6);
  --invitation-button-gap: 14px;
}

/* Rule 23: section looks and type colours, editable through Core Design. */
:root {
  --color-section-page: var(--color-surface-1);
  --color-on-section-page: var(--color-text-1);
  --color-section-cream: var(--c-light);
  --color-on-section-cream: var(--color-text-1);
  --color-section-ink: var(--c-ink);
  --color-on-section-ink: var(--c-light);
  --color-section-sage: var(--c-sage-deep);
  --color-on-section-sage: var(--c-white);
  --color-section-ochre: var(--c-ochre);
  --color-on-section-ochre: var(--c-ink);
  --color-section-photo: var(--c-ink);
  --color-on-section-photo: var(--c-white);
  --color-type-display: var(--color-text-1);
  --color-type-h2: var(--color-text-1);
  --color-type-h3: var(--color-text-1);
  --color-type-body: var(--color-on-section-page);
  --color-type-small: var(--color-text-2);
}