/* ---------------------------------------------------------------------------
   commheal.org — design tokens.
   Added 2026-08-20, lifted out of style.css.

   WHY A SEPARATE FILE. A token layer is the one place literal values belong,
   and keeping it separate is what lets the rest of the stylesheet be checked
   for stray literals at all — with the :root block inline, every definition
   read as a violation and the real strays were invisible among them.

   ⚠️ EVERY VALUE HERE IS CARRIED OVER VERBATIM from the style.css that was live
   on 2026-08-20. Nothing was snapped to a rounder number or folded into a
   neighbour, deliberately: this is a client site whose rendering cannot be
   re-checked visually from here, so this pass names values, it does not change
   them. tests/test-commheal-tokens.php proves that — it resolves every var()
   back to a literal and asserts the resulting declaration list is identical to
   the pre-token stylesheet. Rationalising the scale is a separate job, done
   with someone looking at the page.

   That verbatim rule is why the scales below have the shape they do: 0.85 AND
   0.875 AND 0.9 AND 0.95rem all exist because all four were already in use.
   The sprawl is the finding, not the design.

   ⚠️ This file must be linked BEFORE style.css on every page. An undefined
   var() is dropped silently — no error, no warning, the element just renders
   unstyled — so a page that loads style.css without this one looks broken with
   nothing in any console to say why. tests/test-commheal-tokens.php asserts
   both halves: every page links it first, and every var() style.css references
   is defined here.

   No Tailwind on this site, so the --color-* / --font-* names below cannot
   collide with Tailwind v4's owned namespaces. --font-size-* is used rather
   than --text-* to keep it that way if that ever changes.
--------------------------------------------------------------------------- */
:root {
    /* --- Brand & surface ------------------------------------------------ */
    --color-bg: #FDFBF7;
    /* Warm off-white */
    --color-surface: #fff;
    /* Cards, fields, sections that sit above --color-bg */
    --color-text-main: #2C3E2C;
    /* Deep green-black */
    --color-text-muted: #5F6E5F;
    /* Muted sage — darkened from #6B7A6B for WCAG AA (4.40:1 -> 5.23:1 on --color-bg) */
    --color-accent: #5A7A1E;
    /* Olive Drab / Nature Green — darkened from #6B8E23 for WCAG AA.
       4.80:1 as text on --color-bg, 4.96:1 behind white in .btn (was 3.68 / 3.81) */
    --color-accent-hover: #46601A;
    --color-accent-active: #3A5015;
    --color-accent-strong: #2E5E14;
    /* Success message text */
    --color-accent-light: #E8F3E8;
    --color-accent-alt: #4a7c59;
    /* The selected page chip in the gallery pager */
    --color-on-accent: #fff;
    /* Text and icons sitting ON a filled accent surface */
    --color-earth: #A0522D;
    /* Sienna */

    /* --- Controls ------------------------------------------------------- */
    --color-control-border: #748674;
    /* #748674, not a lighter sage: WCAG 1.4.11 wants 3:1 for a control
       boundary. 3.89:1 against the white field, 3.41:1 against the section. */
    --color-disabled-bg: #9AA79A;
    --color-disabled-text: #2C3E2C;
    /* Was #F4F4F4 — near-white on the sage fill, 2.28:1, barely readable.
       WCAG 1.4.3 exempts a disabled control from any contrast requirement, so
       this was conformant; it was still the label on the donate button, which
       is disabled exactly while someone is trying to give money. Changed
       2026-08-20 to the same dark green as body text: 4.57:1, so it passes AA
       anyway. The control still reads as disabled through the muted fill and
       cursor: not-allowed, which is where that signal belongs — not in text
       nobody can read. The only rendering change in the token extraction, and
       it is deliberate. */

    /* --- Danger --------------------------------------------------------- */
    --color-danger-border: #B3261E;
    --color-danger-text: #8C1D18;
    --color-danger-bg: #FDF6F5;
    --color-danger-bg-strong: #FDECEA;
    --color-danger-text-strong: #8A2116;

    /* --- Translucent surfaces & scrims ---------------------------------- */
    --color-header-bg: rgba(253, 251, 247, 0.95);
    --color-drawer-bg: rgba(253, 251, 247, 0.98);
    --color-hero-veil-top: rgba(253, 251, 247, 0.9);
    --color-hero-veil-bottom: rgba(253, 251, 247, 0.65);
    --color-scrim-soft: rgba(44, 62, 44, 0.4);
    --color-scrim-overlay: rgba(0, 0, 0, 0.45);
    --color-scrim-control: rgba(0, 0, 0, 0.7);
    --color-scrim-lightbox: rgba(0, 0, 0, 0.95);

    /* --- Elevation ------------------------------------------------------ */
    /* Low opacity, high blur — depth without a grey haze over a warm palette. */
    --shadow-header: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 5px 20px rgba(0, 0, 0, 0.03);
    --shadow-raised: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-drawer: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lightbox: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-selected: 0 3px 8px rgba(74, 124, 89, 0.4);

    /* --- Type ----------------------------------------------------------- */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;

    /* Numeric steps, not t-shirt sizes: the values below are what the
       stylesheet already used, and a t-shirt name would imply a system that
       has not been designed yet. Fourteen steps for one small site is the
       drift, stated plainly. */
    --font-size-050: 0.85rem;
    --font-size-075: 0.875rem;
    --font-size-100: 0.9rem;
    --font-size-200: 0.95rem;
    --font-size-300: 1rem;
    --font-size-400: 1.05rem;
    --font-size-500: 1.1rem;
    --font-size-600: 1.15rem;
    --font-size-700: 1.2rem;
    --font-size-800: 1.35rem;
    --font-size-900: 1.4rem;
    --font-size-1000: 1.8rem;
    --font-size-1100: 2rem;
    --font-size-1200: 2.5rem;

    --font-size-control: 16px;
    /* 16px, in px on purpose: iOS Safari zooms the viewport when a focused
       input's text is under 16px, and a rem here would break that the first
       time anyone changed the root size. */
    --font-size-icon-lg: 40px;
    --font-size-icon-xl: 50px;

    /* Fluid steps. Kept whole rather than split into min/max tokens — the
       clamp() is the value, and splitting it invites two halves drifting. */
    --font-size-fluid-lede: clamp(1.1rem, 2.5vw, 1.5rem);
    --font-size-fluid-h2: clamp(1.5rem, 4vw, 2.5rem);
    --font-size-fluid-h1: clamp(2rem, 6vw, 4rem);
    --font-size-fluid-display: clamp(2rem, 6vw, 3rem);

    /* --- Space ---------------------------------------------------------- */
    /* The px scale only. Most of this stylesheet already spaces in rem, and
       those were left alone; these are the values that were still in px. */
    --space-2xs: 2px;
    --space-xs: 10px;
    --space-sm: 12px;
    --space-md: 14px;
    --space-base: 16px;
    --space-lg: 18px;
    --space-xl: 20px;
    --space-2xl: 30px;
    --space-3xl: 80px;
    --space-4xl: 120px;
    /* --space-3xl (80px = 5rem) is the fixed-header offset. Any page section
       that starts at the top of the viewport needs at least this much
       padding-top or the header lands on top of its first line. */

    --spacing-container: 5%;
    --spacing-section: 6rem;
}