/* =============================================================
   tokens.css — Action Fence of Chattanooga — THE STYLE FOUNDATION
   Picks (2026-10-16): layout Hometown Heavyweight, type Epilogue + Karla,
   palette 3 (brand red surface, white, concrete, warm black).
   Status: LOCKED 2026-10-16 (operator approved style-preview.html).
   Any change re-opens the rendered-preview gate.
   ============================================================= */

:root {
  /* ---- Color: brand --------------------------------------- */
  --color-brand:            #CC0000;   /* sampled from the AF logo */
  --color-brand-strong:     #9E0000;   /* hover / active / band edge */
  --color-brand-soft:       #FBECEC;   /* red wash for notes and focus halos */
  --color-accent:           #0A0A0A;   /* black blocks (operator 2026-10-16: dark bands + footer black) */

  /* ---- Color: neutrals (cool greys since 2026-10-16; ink stays near-black) ---- */
  --color-ink:              #161212;
  --color-ink-muted:        #161212;   /* operator 2026-10-16: no grey text; hierarchy comes from size/weight */
  --color-line:             #DDE1E6;
  --color-surface:          #FFFFFF;
  --color-surface-raised:   #F4F6F8;
  --color-surface-alt:      #E6E9ED;   /* cool grey (operator 2026-10-16: no beige): alternate sections */
  --color-surface-inverse:  #0A0A0A;   /* footer, dark bands and panels: black (operator 2026-10-16) */
  --color-on-inverse:       #FFFFFF;
  --color-on-brand:         #FFFFFF;   /* text on red surfaces */

  /* ---- Color: state --------------------------------------- */
  --color-focus:            #161212;
  --color-error:            #9E0000;
  --color-success:          #1F6B3A;

  /* ---- Typography ----------------------------------------- */
  --font-head:              "Epilogue", "Helvetica Neue", Arial, sans-serif;
  --font-body:              "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-weight-body:       400;
  --font-weight-medium:     500;
  --font-weight-bold:       700;
  --font-weight-head:       800;

  /* Modular scale 1.25 from 16px, fluid on the large steps. */
  --scale-ratio:            1.25;
  --text-xs:                0.9375rem;                        /* 15px captions, labels (operator 2026-10-16: no small text; was 13) */
  --text-sm:                1rem;                             /* 16px meta (was 14) */
  --text-nav:               0.9375rem;                        /* 15px header nav, sized to fit the bar */
  --text-base:              1.125rem;                         /* 18px body (was 17) */
  --text-lg:                1.25rem;                          /* 20px lead */
  --text-h4:                1.25rem;                          /* 20px */
  --text-h3:                clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);   /* 22–26px */
  --text-h2:                clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);      /* 28–40px */
  --text-h1:                clamp(2.25rem, 1.5rem + 3vw, 3.5rem);        /* 36–56px */
  --text-display:           clamp(2.75rem, 1.8rem + 3.6vw, 4.25rem);     /* 44–68px hero */

  --leading-body:           1.6;
  --leading-tight:          1.02;
  --tracking-head:          -0.03em;
  --tracking-caps:          0.06em;    /* only for the rare short label */
  --measure:                none;   /* operator 2026-10-16: text fills its column to the gutters; was 68ch */
  --measure-article:        75ch;   /* long-form blog posts only */

  /* ---- Spacing (4pt grid) --------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --section-y:              clamp(56px, 4vw + 32px, 80px);
  --container:              1760px;   /* operator 2026-10-16: 1180 -> 1440 -> 1760 */
  --gutter:                 clamp(20px, 4vw, 56px);

  /* ---- Radius (hard-edge system) -------------------------- */
  --radius-sm:              4px;      /* form fields only */
  --radius-md:              0;
  --radius-lg:              0;
  --radius-pill:            999px;

  /* ---- Border --------------------------------------------- */
  --border-width:           1px;
  --border:                 var(--border-width) solid var(--color-line);
  --border-strong:          2px solid var(--color-ink);
  --rule-brand:             4px solid var(--color-brand);

  /* ---- Shadow (used sparingly; no soft card shadows) ------ */
  --shadow-sm:              0 1px 0 rgba(10, 10, 10, 0.08);
  --shadow-md:              0 8px 24px -16px rgba(10, 10, 10, 0.35);
  --shadow-lg:              0 24px 48px -24px rgba(10, 10, 10, 0.45);

  /* ---- Photo overlays ------------------------------------- */
  --overlay-caption:        linear-gradient(to top, rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0));
  --overlay-hero:           linear-gradient(to right, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.1));

  /* ---- Motion --------------------------------------------- */
  --ease:                   cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:               120ms;
  --dur:                    200ms;
  --dur-slow:               420ms;
}

/* Honor reduced-motion at the foundation level. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur:      0.01ms;
    --dur-slow: 0.01ms;
  }
}