/* ==========================================================================
   FWCA Design Tokens
   Lifted verbatim from the FWCA Branding Kit design system.
   Do not hand-edit colors in site.css — change them here and they change
   everywhere on the site.

   Pool  = teal-green water (the primary brand color)
   Sun   = warm gold (the accent — used sparingly, for the single most
           important action on a page)
   Shore = cool grays (text, borders)
   Sand  = warm off-white (page background in light mode)
   ========================================================================== */

:root {
  /* ---- pool ---- */
  --fwca-pool-50:  #e7faf7;
  --fwca-pool-100: #c7f2ec;
  --fwca-pool-200: #9fe4da;
  --fwca-pool-300: #75d1c5;
  --fwca-pool-400: #35b4a7;
  --fwca-pool-500: #009589;
  --fwca-pool-600: #007b70;
  --fwca-pool-700: #00655c;
  --fwca-pool-800: #004b45;
  --fwca-pool-900: #02332f;
  --fwca-pool-950: #021d1a;

  /* ---- sun ---- */
  --fwca-sun-50:  #fff7e2;
  --fwca-sun-100: #ffecb9;
  --fwca-sun-200: #ffdc8a;
  --fwca-sun-300: #ffd060;
  --fwca-sun-400: #fdc436;
  --fwca-sun-500: #f3ba25;
  --fwca-sun-600: #cf9b00;
  --fwca-sun-700: #916a00;
  --fwca-sun-800: #694e00;
  --fwca-sun-900: #4b3702;

  /* ---- shore ---- */
  --fwca-shore-50:  #f7fbfb;
  --fwca-shore-100: #edf3f3;
  --fwca-shore-200: #dee6e7;
  --fwca-shore-300: #c9d3d4;
  --fwca-shore-400: #9ca7a8;
  --fwca-shore-500: #768384;
  --fwca-shore-600: #5a6667;
  --fwca-shore-700: #445050;
  --fwca-shore-800: #2a3536;
  --fwca-shore-900: #172122;
  --fwca-shore-950: #081112;

  /* ---- sand ---- */
  --fwca-sand-50:  #fdfaf4;
  --fwca-sand-100: #f8f3e9;
  --fwca-sand-200: #efe7d9;

  /* ---- status ---- */
  --fwca-green-100: #d1f2d7;
  --fwca-green-500: #3b9555;
  --fwca-green-700: #206133;
  --fwca-amber-100: #ffe1c6;
  --fwca-amber-500: #f3821d;
  --fwca-amber-700: #a34d00;
  --fwca-red-100:   #ffdcd7;
  --fwca-red-500:   #d33a3c;
  --fwca-red-700:   #972527;
  --fwca-white:     #ffffff;

  /* ---- semantic: light (default) ----

     WHITE IS THE PAGE. The brand kit's default page color is Sand 50
     (#fdfaf4, a warm cream). On the website we use pure white instead, so
     the logo's teal and gold read at full strength rather than sitting on a
     competing warm tint.

     That inverts how the alternating sections work. The page used to be
     cream with white bands laid over it; now the page is white and the
     bands carry a barely-there cool tint (--color-band) that harmonises
     with the teal instead of fighting it.

     If the committee ever wants the warmth back, change --color-bg to
     var(--fwca-sand-50) and --color-band to var(--fwca-white). That one
     swap returns the whole site to the kit's original scheme. */
  --color-bg:             var(--fwca-white);
  --color-surface:        var(--fwca-white);
  --color-band:           var(--fwca-shore-50);
  --color-surface-2:      var(--fwca-shore-100);
  --color-surface-brand:  var(--fwca-pool-50);
  --color-text:           var(--fwca-shore-950);
  --color-text-2:         var(--fwca-shore-700);
  /* ACCESSIBILITY DEVIATION FROM THE BRAND KIT.
     The kit sets --color-text-muted to shore-500 (#768384). Against the light
     backgrounds it's used on, that measures 3.8:1 — under the 4.5:1 minimum
     WCAG AA requires for text this size, and it's used for captions and form
     hints, which are the smallest text on the site. Stepping one shade darker
     to shore-600 gives 5.7:1 and is visually almost identical.
     Worth fixing in the brand kit itself. Dark mode is unaffected. */
  --color-text-muted:     var(--fwca-shore-600);
  --color-text-on-brand:  var(--fwca-white);
  --color-text-brand:     var(--fwca-pool-700);
  --color-text-accent:    var(--fwca-sun-700);
  --color-border:         var(--fwca-shore-200);
  --color-border-strong:  var(--fwca-shore-300);
  --color-primary:        var(--fwca-pool-600);
  --color-primary-hover:  var(--fwca-pool-700);
  --color-primary-active: var(--fwca-pool-800);
  --color-primary-soft:   var(--fwca-pool-100);
  --color-accent:         var(--fwca-sun-500);
  --color-accent-hover:   var(--fwca-sun-600);
  --color-accent-soft:    var(--fwca-sun-100);
  --color-text-on-accent: var(--fwca-shore-950);
  --color-focus-ring:     var(--fwca-pool-400);
  --color-success:        var(--fwca-green-500);
  --color-success-soft:   var(--fwca-green-100);
  --color-success-text:   var(--fwca-green-700);
  --color-warning:        var(--fwca-amber-500);
  --color-warning-soft:   var(--fwca-amber-100);
  --color-warning-text:   var(--fwca-amber-700);
  --color-danger:         var(--fwca-red-500);
  --color-danger-soft:    var(--fwca-red-100);
  --color-danger-text:    var(--fwca-red-700);
  --color-link:           var(--fwca-pool-700);
  --color-link-hover:     var(--fwca-pool-800);
  --shadow-card:  0 1px 2px rgba(23, 42, 52, 0.06), 0 4px 16px rgba(23, 42, 52, 0.06);
  --shadow-float: 0 8px 32px rgba(23, 42, 52, 0.14);
  color-scheme: light;

  /* ---- type ---- */
  --font-display: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Mulish", "Helvetica Neue", system-ui, sans-serif;
  --font-utility: "DM Mono", "SF Mono", Menlo, monospace;

  --weight-display: 800;
  --weight-display-heavy: 900;
  --weight-heading: 700;
  --weight-body: 400;
  --weight-body-strong: 600;
  --weight-utility: 500;

  --text-display-xl: 64px; --leading-display-xl: 1.02; --tracking-display-xl: -0.02em;
  --text-display-lg: 48px; --leading-display-lg: 1.06; --tracking-display-lg: -0.015em;
  --text-display-md: 36px; --leading-display-md: 1.12; --tracking-display-md: -0.01em;
  --text-heading-lg: 28px; --leading-heading-lg: 1.2;  --tracking-heading-lg: -0.005em;
  --text-heading-md: 22px; --leading-heading-md: 1.3;  --tracking-heading-md: 0;
  --text-heading-sm: 18px; --leading-heading-sm: 1.35; --tracking-heading-sm: 0;
  --text-body-lg: 18px;    --leading-body-lg: 1.6;
  --text-body-md: 16px;    --leading-body-md: 1.6;
  --text-body-sm: 14px;    --leading-body-sm: 1.5;
  --text-caption: 13px;    --leading-caption: 1.45;
  --text-label: 12px;      --leading-label: 1.3; --tracking-label: 0.08em;

  /* ---- spacing (4px base) ---- */
  --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;

  /* ---- radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  --icon-stroke: 1.75px;
  --icon-size-sm: 16px; --icon-size-md: 20px;
  --icon-size-lg: 24px; --icon-size-xl: 32px;

  --container-max: 1200px;
  --content-max: 68ch;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* ---- semantic: dark ----
   Applied two ways:
   1. [data-theme="dark"] — set by the theme toggle button.
   2. prefers-color-scheme — the visitor's OS setting, unless they've
      explicitly chosen light via the toggle.
   The shared block below keeps the two in sync without duplicating values. */

[data-theme="dark"] {
  --color-bg:             var(--fwca-pool-950);
  --color-surface:        var(--fwca-pool-900);
  --color-band:           var(--fwca-pool-900);
  --color-surface-2:      var(--fwca-pool-800);
  --color-surface-brand:  var(--fwca-pool-800);
  --color-text:           var(--fwca-shore-50);
  --color-text-2:         var(--fwca-shore-300);
  --color-text-muted:     var(--fwca-shore-400);
  --color-text-on-brand:  var(--fwca-pool-950);
  --color-text-brand:     var(--fwca-pool-300);
  --color-text-accent:    var(--fwca-sun-300);
  --color-border:         rgba(255, 255, 255, 0.12);
  --color-border-strong:  rgba(255, 255, 255, 0.22);
  --color-primary:        var(--fwca-pool-300);
  --color-primary-hover:  var(--fwca-pool-200);
  --color-primary-active: var(--fwca-pool-400);
  --color-primary-soft:   var(--fwca-pool-800);
  --color-accent:         var(--fwca-sun-400);
  --color-accent-hover:   var(--fwca-sun-300);
  --color-accent-soft:    var(--fwca-sun-900);
  --color-text-on-accent: var(--fwca-shore-950);
  --color-focus-ring:     var(--fwca-pool-300);
  --color-success-soft:   rgba(255, 255, 255, 0.08);
  --color-success-text:   var(--fwca-green-100);
  --color-warning-soft:   rgba(255, 255, 255, 0.08);
  --color-warning-text:   var(--fwca-amber-100);
  --color-danger-soft:    rgba(255, 255, 255, 0.08);
  --color-danger-text:    var(--fwca-red-100);
  --color-link:           var(--fwca-pool-300);
  --color-link-hover:     var(--fwca-pool-200);
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             var(--fwca-pool-950);
    --color-surface:        var(--fwca-pool-900);
    --color-band:           var(--fwca-pool-900);
    --color-surface-2:      var(--fwca-pool-800);
    --color-surface-brand:  var(--fwca-pool-800);
    --color-text:           var(--fwca-shore-50);
    --color-text-2:         var(--fwca-shore-300);
    --color-text-muted:     var(--fwca-shore-400);
    --color-text-on-brand:  var(--fwca-pool-950);
    --color-text-brand:     var(--fwca-pool-300);
    --color-text-accent:    var(--fwca-sun-300);
    --color-border:         rgba(255, 255, 255, 0.12);
    --color-border-strong:  rgba(255, 255, 255, 0.22);
    --color-primary:        var(--fwca-pool-300);
    --color-primary-hover:  var(--fwca-pool-200);
    --color-primary-active: var(--fwca-pool-400);
    --color-primary-soft:   var(--fwca-pool-800);
    --color-accent:         var(--fwca-sun-400);
    --color-accent-hover:   var(--fwca-sun-300);
    --color-accent-soft:    var(--fwca-sun-900);
    --color-text-on-accent: var(--fwca-shore-950);
    --color-focus-ring:     var(--fwca-pool-300);
    --color-success-soft:   rgba(255, 255, 255, 0.08);
    --color-success-text:   var(--fwca-green-100);
    --color-warning-soft:   rgba(255, 255, 255, 0.08);
    --color-warning-text:   var(--fwca-amber-100);
    --color-danger-soft:    rgba(255, 255, 255, 0.08);
    --color-danger-text:    var(--fwca-red-100);
    --color-link:           var(--fwca-pool-300);
    --color-link-hover:     var(--fwca-pool-200);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}