/* MUV Digital tokens (Meyers house style, see DESIGN-STYLE.md). */
:root {
    /* ---- Accent: DECIDED, MUV has no accent color (black and white; photography supplies the color) ----
       Leave these three commented out: black buttons on light bands, white buttons on dark bands.
       The hooks stay for later: to adopt a brand color, uncomment and set all three. --on-brand is the
       text color on brand fills; pick whichever of white or #161616 reaches 4.5:1 on the brand color.
       Every CTA, active nav block, check icon, kicker, utility bar and brand rule follows from these.

    --brand: #F15A22;
    --brand-hover: #D84B16;
    --on-brand: #161616;
    */

    /* ---- Surfaces ---- */
    --dark: #161616;
    --dark-2: #222222;
    --light: #ffffff;
    --light-alt: #f2f2f0;
    --light-gray: #d6d6d2;                  /* deeper neutral band; --text and --muted are AA on it */

    /* ---- Text ---- */
    --text: #161616;
    --muted: #595959;                       /* AA on --light and --light-alt */
    --on-dark: #ffffff;
    --on-dark-muted: rgba(255, 255, 255, 0.72);
    --line-light: #dcdcd8;
    --line-dark: rgba(255, 255, 255, 0.14);

    /* ---- Roles (light-band defaults; .on-dark below flips them) ---- */
    --cta-bg: var(--brand, var(--dark));
    --cta-fg: var(--on-brand, #ffffff);
    --cta-hover: var(--brand-hover, #000000);
    --outline: var(--dark);                 /* outline border + text */
    --outline-ink: #ffffff;                 /* outline text on hover fill */
    --soft-bg: #e6e6e2;
    --soft-fg: var(--dark);
    --accent: var(--brand, var(--dark));    /* rules, numerals, checks */
    --accent-ink: var(--on-brand, #ffffff); /* text/icon drawn on --accent */
    --focus: var(--dark);

    /* ---- Type ---- */
    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-body: 1.0625rem;
    --fs-lede: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --fs-small: 0.9375rem;
    --fs-label: 0.78rem;
    --fs-h1: clamp(2.5rem, 4vw + 1rem, 4.75rem);
    --fs-h2: clamp(2rem, 2.5vw + 1rem, 3.25rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    --lh-body: 1.7;
    --lh-head: 1.08;
    --track-head: -0.02em;
    --track-label: 0.06em;
    --measure: 70ch;

    /* ---- Spacing & shape ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --section-y: clamp(4rem, 3rem + 4vw, 7.25rem);   /* 64px mobile, ~116px desktop */
    --gutter: clamp(1rem, 0.5rem + 2.2vw, 2rem);
    --radius: 3px;
    --radius-card: 14px;
    --header-h: 72px;
    --touch: 44px;
}

/* Dark context: header, hero, dark bands, footer. */
.on-dark {
    --cta-bg: var(--brand, #ffffff);
    --cta-fg: var(--on-brand, var(--dark));
    --cta-hover: var(--brand-hover, #e4e4e1);
    --outline: #ffffff;
    --outline-ink: var(--dark);
    --soft-bg: rgba(255, 255, 255, 0.92);
    --soft-fg: var(--dark);
    --accent: var(--brand, #ffffff);
    --accent-ink: var(--on-brand, var(--dark));
    --focus: #ffffff;
    color: var(--on-dark);
}