/* ============================================================================
   DESIGN TOKENS — the rebrand surface.
   Everything visual resolves through this file. To re-skin the page for a
   different municipality, edit ONLY the "BRAND" block below; the semantic
   layer beneath it re-points automatically and styles.css never sees a raw
   hex value.

   Contrast ratios are noted where they matter. Target: WCAG 2.2 AA floor,
   AAA (7:1) on body text. If you change --brand-*, re-check the pairs marked
   with a ratio comment.
   ========================================================================= */

:root {
  /* ---- BRAND ------------------------------------------------------------
     Sampled from assets/svg/open_spaces_360_logo.svg so the page and the
     footer mark can never drift apart. Swap these 5 values to rebrand.      */
  --brand-primary:       #0C2D62;   /* institutional navy */
  --brand-primary-dark:  #082047;   /* hover / pressed    */
  --brand-primary-tint:  #E6EFF8;   /* washes, backgrounds */
  --brand-accent:        #E0A84A;   /* gold — decorative + focus on dark   */
  --brand-ink:           #12294F;   /* darkest readable text */

  /* ---- SEMANTIC COLOR ---------------------------------------------------
     Components reference these, never --brand-* directly.                   */
  --color-primary:        var(--brand-primary);      /* 13.4:1 on white AAA */
  --color-primary-hover:  var(--brand-primary-dark);
  --color-on-primary:     #FFFFFF;                   /* 13.4:1 on navy AAA  */
  --color-accent:         var(--brand-accent);       /* decorative only —
                              2.1:1 on white, never use for text on light   */

  --color-fg:             var(--brand-ink);   /* 13.1:1 on white — AAA      */
  --color-fg-muted:       #3B5573;            /*  7.7:1 on white — AAA      */
  --color-fg-subtle:      #5A6B84;            /*  5.4:1 on white — AA       */

  --color-surface:        #FFFFFF;            /* cards, popovers            */
  --color-border:         #E3E9F1;
  --color-border-strong:  #A8B8CC;            /* 3:1 vs white — a11y borders */
  --color-bg:             #F4F8FC;
  --color-bg-tint:        var(--brand-primary-tint);
  --color-hover-wash:     rgba(12, 45, 98, 0.06);

  /* Focus indicator. WCAG 2.2 SC 1.4.11 wants >=3:1 against what's adjacent,
     so the ring flips per surface. The halo keeps it visible over the photo. */
  --color-focus:          var(--brand-primary);      /* 13.4:1 on white     */
  --color-focus-on-dark:  var(--brand-accent);       /*  6.3:1 on navy      */
  --focus-width:          3px;
  --focus-offset:         3px;
  --focus-halo:           0 0 0 calc(var(--focus-width) + var(--focus-offset) + 3px) rgba(255, 255, 255, 0.95);

  /* ---- TYPE -------------------------------------------------------------
     One family, matching the reference. Lexend is the accessibility-forward
     alternative for civic work — swap --font-sans and the <link> in
     index.html together and nothing else changes.                           */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale, deliberately quieter than the reference mockup: the display
     size and the weights across the page were dialled back on review. The
     minimum of each clamp keeps text legible at 320px and never drops below
     1rem for body-grade copy (no iOS zoom-on-focus, no sub-16px reading).
     Ratios are ~1.25 apart, so nudging one value keeps the scale coherent.  */
  --text-display:   clamp(2.25rem, 3.35vw, 3.5rem);     /* 36 →  56px */
  --text-lede:      clamp(1.0625rem, 1.14vw, 1.1875rem);/* 17 →  19px */
  --text-cta:       clamp(1rem, 1.2vw, 1.25rem);        /* 16 →  20px */
  --text-brand:     clamp(0.9375rem, 1.02vw, 1.0625rem);/* 15 →  17px */
  --text-lang:      clamp(0.875rem, 0.9vw, 0.9375rem);  /* 14 →  15px */
  --text-feature:   clamp(0.9375rem, 1.02vw, 1.0625rem);/* 15 →  17px */
  --text-meta:      clamp(0.875rem, 0.96vw, 1rem);      /* 14 →  16px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Headline weight is its own token — it is the loudest thing on the page
     and the most likely to be re-tuned per brand. */
  --weight-display: 600;

  --leading-tight:  1.08;
  --leading-snug:   1.35;
  --leading-normal: 1.5;   /* WCAG 1.4.12 floor for body text */

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;

  /* ---- SPACE (4px rhythm) ----------------------------------------------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  1.875rem;  /* 30 */
  --space-7:  2.125rem;  /* 34 */
  --space-8:  2.75rem;   /* 44 */
  --space-9:  3.5rem;    /* 56 */
  --space-10: 4.5rem;    /* 72 */
  --space-11: 5.625rem;  /* 90 */

  /* ---- LAYOUT -----------------------------------------------------------
     The reference canvas is 1672×941, so the clamp maxima are its literal
     measurements.                                                           */
  --page-max:      1672px;
  --gutter:        clamp(1.25rem, 4.55vw, 4.75rem);  /* 20 →  76px */
  --card-max:      1496px;
  --lang-inset:    clamp(1.25rem, 2.75vw, 2.875rem); /* 20 →  46px */
  --header-pad-y:  clamp(1.25rem, 1.91vw, 2rem);     /* 20 →  32px */
  /* Control sizes track the type scale — they were re-proportioned with it
     so a 20px label never floats inside a 94px slab. */
  --cta-min-w:     min(100%, 310px);
  --cta-height:    clamp(3rem, 4.19vw, 4.375rem);    /* 48 →  70px */
  --card-height:   clamp(5.25rem, 7.18vw, 7.5rem);   /* 84 → 120px */
  --crest-height:  clamp(2.75rem, 4.07vw, 4.25rem);  /* 44 →  68px */

  --icon-sm:  clamp(0.875rem, 0.96vw, 1rem);     /* 14 → 16px */
  --icon-md:  clamp(1rem, 1.2vw, 1.25rem);       /* 16 → 20px */
  --icon-lg:  clamp(1.75rem, 2.15vw, 2.25rem);   /* 28 → 36px */

  /* WCAG 2.5.8 / Apple HIG minimum interactive size. */
  --tap-min: 44px;

  /* ---- SHAPE ------------------------------------------------------------ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* ---- ELEVATION -------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(12, 45, 98, 0.06);
  --shadow-md: 0 6px 24px rgba(12, 45, 98, 0.08);
  --shadow-lg: 0 14px 44px rgba(12, 45, 98, 0.09);

  /* ---- MOTION ----------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;

  /* ---- LAYERS -----------------------------------------------------------
     --z-media is negative on purpose: the photo is a positioned element and
     would otherwise paint over the (non-positioned) headline and button.    */
  --z-media:   -1;
  --z-content: 10;
  --z-header:  20;
  --z-popover: 40;
  --z-skiplink: 60;

  /* ---- HERO MEDIA -------------------------------------------------------
     How far the photograph is washed out so the headline keeps its 13:1.
     A plain two-stop ramp clears 40% opacity right under the headline, so
     the curve is shaped: barely-there until ~26%, then a fast rise.         */
  --hero-mask: linear-gradient(to right,
      transparent 8%,
      rgba(0, 0, 0, 0.08) 26%,
      rgba(0, 0, 0, 0.36) 43%,
      #000 63%);
  --hero-floor: 74%;   /* vertical fade-out above the feature card */
}

/* Users who ask the OS for more contrast get harder borders and a fully
   opaque headline backdrop instead of the photographic wash. */
@media (prefers-contrast: more) {
  :root {
    --color-fg-subtle:  #3B5573;   /* 7.7:1 — promote to AAA */
    --color-border:     var(--color-border-strong);
    /* Push the photo entirely clear of the text column. */
    --hero-mask: linear-gradient(to right, transparent 46%, #000 78%);
    --shadow-md:        0 0 0 1px var(--color-border-strong);
    --shadow-lg:        0 0 0 1px var(--color-border-strong);
  }
}