/* =============================================================
   RVCFD.ORG — DESIGN TOKENS
   Concept 5, "The Civic Journal" — locked baseline.

   THIS FILE IS THE CONTRACT WITH WORDPRESS.
   Every custom property below maps 1:1 to an entry in theme.json.
   Do not add a value here that does not belong in theme.json,
   and do not use a raw value anywhere in main.css that is not
   defined here.
   ============================================================= */

:root{

  /* ---------------------------------------------------------
     COLOR — sampled from the official department patch
     theme.json → settings.color.palette
     --------------------------------------------------------- */

  /* Navy — the ink and the accent. Not the environment. */
  --navy-900:#0A1D3A;   /* footer, hero scrim, dispatch strip, run band */
  --navy-800:#10294F;   /* raised surfaces on dark */
  --navy-700:#16345F;   /* borders and dividers on dark */
  --navy-500:#2A5599;   /* links and interactive states on light */

  /* Neutrals — the environment */
  --paper:#FFFFFF;      /* light surface */
  --white:#FFFFFF;      /* text and marks ON dark surfaces */
  --bone:#F7F5F0;       /* warm surface, long-form reading */
  --fog:#F1F3F6;        /* alternating section background */
  --silver-200:#D8DDE4; /* rules, borders, dividers */
  --slate-400:#8A94A2;  /* metadata, captions, disabled */
  --slate-700:#3D4753;  /* secondary body text */
  --ink:#12161C;        /* primary body text on light */

  /* Gold — honor, history, editorial rules */
  --gold-500:#C9A227;   /* rules, dates, marks, accents on navy */
  --gold-300:#E8C55A;   /* hover states on navy; text on navy */
  --gold-700:#8A6E14;   /* THE ONLY gold permitted as text on white */

  /* Red — action and alert. */
  --red-600:#B3272D;
  --red-700:#8E1F24;

  /* ---------------------------------------------------------
     TYPOGRAPHY
     theme.json → settings.typography
     --------------------------------------------------------- */
  --font-serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale — 1.25 modular. Every size comes from here. */
  --fs-display:clamp(3.5rem, 6.4vw, 5.75rem);   /*  56 →  92 */
  --fs-h1:clamp(2.5rem, 4.6vw, 3.5rem);         /*  40 →  56 */
  --fs-h2:clamp(2.125rem, 4vw, 3.625rem);       /*  34 →  58 */
  --fs-h3:clamp(1.5rem, 2.2vw, 1.875rem);       /*  24 →  30 */
  --fs-h4:1.375rem;                             /*  22 */
  --fs-body-lg:1.25rem;                         /*  20 */
  --fs-body:1.125rem;                           /*  18 */
  --fs-small:0.9375rem;                         /*  15 */
  --fs-label:0.75rem;                           /*  12 */
  --fs-stat:clamp(3.25rem, 5vw, 3.625rem);      /*  52 →  58 */
  --fs-stat-hero:clamp(4.75rem, 13vw, 12.25rem);/*  76 → 196 — Run Report only */

  --lh-tight:1.02;
  --lh-heading:1.15;
  --lh-body:1.6;

  --ls-display:-0.03em;
  --ls-heading:-0.02em;
  --ls-label:0.14em;

  /* ---------------------------------------------------------
     SPACING — base unit 4px. No value outside this set.
     theme.json → settings.spacing.spacingSizes
     --------------------------------------------------------- */
  --sp-1:0.25rem;   /*   4 */
  --sp-2:0.5rem;    /*   8 */
  --sp-3:0.75rem;   /*  12 */
  --sp-4:1rem;      /*  16 */
  --sp-5:1.25rem;   /*  20 */
  --sp-6:1.5rem;    /*  24 */
  --sp-8:2rem;      /*  32 */
  --sp-12:3rem;     /*  48 */
  --sp-16:4rem;     /*  64 */
  --sp-24:6rem;     /*  96 */
  --sp-32:8rem;     /* 128 */
  --sp-40:10rem;    /* 160 */

  /* Section rhythm */
  --section-y:8rem;         /* 128 desktop */
  --section-y-emphasis:10rem;
  --section-y-tablet:6rem;  /*  96 */
  --section-y-mobile:4rem;  /*  64 */

  /* ---------------------------------------------------------
     LAYOUT
     theme.json → settings.layout
     --------------------------------------------------------- */
  --content-max:82.5rem;   /* 1320 */
  --wide-max:97.5rem;      /* 1560 */
  --measure:64ch;          /* body copy 62–72 characters */
  --gutter:1.5rem;         /* 24 */
  --margin:2.5rem;         /* 40 */

  /* Header — drives scroll-margin for keyboard focus (WCAG 2.2 · 2.4.11) */
  --header-h:5.75rem;      /* 92 */
  --header-h-compact:4rem; /* 64 */
  --utility-h:2.625rem;    /* 42 */
  --focus-offset:6.5rem;   /* compact header + breathing room */

  /* ---------------------------------------------------------
     BORDERS & RADII
     Large radii are the fastest way to make an institutional
     site look like a consumer app. 2px on controls, 0 elsewhere.
     --------------------------------------------------------- */
  --radius:2px;
  --hairline:1px solid var(--silver-200);
  --hairline-dark:1px solid rgba(255,255,255,0.20);
  --rule-strong:2px solid var(--navy-900);
  --rule-gold:2px solid var(--gold-500);

  /* ---------------------------------------------------------
     MOTION — reveals move a maximum of 16px.
     No parallax, no autoplay carousels, no counting-up numbers,
     no scroll-jacking.
     --------------------------------------------------------- */
  --dur-hover:120ms;
  --dur-press:80ms;
  --dur-reveal:400ms;
  --dur-menu:280ms;
  --dur-image:300ms;
  --ease-out:ease-out;
  --ease-entrance:cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------------------------------------------------------
     ELEVATION — used sparingly; depth comes from overlap,
     not from drop shadows.
     --------------------------------------------------------- */
  --shadow-rail:0 24px 60px -18px rgba(10,29,58,0.32);
  --shadow-card:0 18px 40px -20px rgba(10,29,58,0.35);
  --shadow-menu:0 20px 44px -20px rgba(10,29,58,0.30);

  /* ---------------------------------------------------------
     FOCUS — WCAG 2.2 · 2.4.13 Focus Appearance
     --------------------------------------------------------- */
  --focus-ring-w:3px;
  --focus-ring-light:var(--navy-500);
  --focus-ring-dark:var(--gold-300);
  --focus-ring-offset:2px;

  /* ---------------------------------------------------------
     COMPONENT DIMENSIONS
     --------------------------------------------------------- */
  --tile-w:17.5rem;        /* 280 — Nine Houses, sized for long names */
  --tile-h:34rem;          /* 544 */
  --touch-min:2.75rem;     /* 44 — exceeds WCAG 2.2 · 2.5.8 (24px) */
}

/* Tablet */
@media (max-width:1023px){
  :root{
    --section-y:var(--section-y-tablet);
    --margin:2.5rem;
    --gutter:1.25rem;
    --header-h:4.625rem;
    --focus-offset:5.5rem;
    --tile-w:15.5rem;
    --tile-h:30rem;
  }
}

/* Mobile */
@media (max-width:767px){
  :root{
    --section-y:var(--section-y-mobile);
    --margin:1.25rem;
    --gutter:1rem;
    --header-h:4.625rem;
    --focus-offset:5.5rem;
    --fs-body:1.0625rem;   /* 17 */
    --tile-w:78vw;
    --tile-h:26rem;
  }
}