/* ============================================================
   TOKENS.CSS — Tattered Flag Foundation
   Primitive design tokens ONLY — no semantic aliases.
   Every other stylesheet on the site links this file first.

   Nonprofit site: flag retirement/disposal + flag donation
   program serving Oracle, San Manuel, Mammoth, and Catalina, AZ.
   ============================================================ */

:root                { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light;      }
[data-theme="dark"]  { color-scheme: dark;        }

:root {

  /* ============================================================
     BLUES
     ============================================================ */
  --clr-blue-lighter: hsl(206, 78%, 92%);
  --clr-blue-light:   hsl(210, 65%, 72%);
  --clr-blue:          hsl(210, 65%, 50%);
  --clr-blue-dark:     hsl(210, 70%, 35%);
  --clr-blue-darker:   hsl(211, 78%, 27%);  /* midpoint of dark/darkest */
  --clr-blue-darkest:  hsl(212, 85%, 18%);

  /* ============================================================
     REDS
     ============================================================ */
  --clr-red-lighter: hsl(0, 75%, 95%);
  --clr-red-light:   hsl(0, 65%, 80%);
  --clr-red:          hsl(1, 65%, 55%);
  --clr-red-dark:     hsl(0, 60%, 38%);
  --clr-red-darker:   hsl(0, 65%, 19%);

  /* ============================================================
     YELLOWS
     ============================================================ */
  --clr-yellow-light: hsl(56, 100%, 78%);
  --clr-yellow:         hsl(56, 100%, 55%);
  --clr-yellow-dark:    hsl(48, 90%, 34%);
  --clr-yellow-gold:    hsl(35, 80%, 60%);  /* logo border / nav header text */

  /* ============================================================
     NEUTRALS
     light → dark: 050 (white) → 950 (black)
     ============================================================ */
  --clr-neutral-050: light-dark(hsl(220, 14%, 100%),  hsl(220, 14%,   7%));
  --clr-neutral-100: light-dark(hsl(220, 10%,  97%),  hsl(220, 10%,  12%));
  --clr-neutral-200: light-dark(hsl(220,  8%,  85%),  hsl(220,  8%,  22%));
  --clr-neutral-300: light-dark(hsl(220,  7%,  70%),  hsl(220,  7%,  35%));
  --clr-neutral-400: light-dark(hsl(220,  7%,  60%),  hsl(220,  7%,  45%));
  --clr-neutral-500: light-dark(hsl(220,  7%,  45%),  hsl(220,  8%,  60%));
  --clr-neutral-600: light-dark(hsl(220,  7%,  35%),  hsl(220,  8%,  75%));
  --clr-neutral-700: light-dark(hsl(220, 10%,  20%),  hsl(220, 10%,  88%));
  --clr-neutral-800: light-dark(hsl(220, 12%,  12%),  hsl(220, 12%,  94%));
  --clr-neutral-900: light-dark(hsl(220, 14%,   7%),  hsl(220, 14%,  97%));
  --clr-neutral-950: hsl(220, 14%, 2%);
  --clr-neutral-black-gray: light-dark(black, gray);

  /* ============================================================
     GRAYS
     ============================================================ */
  --clr-gray-lighter: hsl(60, 9%, 93%);
  --clr-gray-light:   hsl(51, 6%, 71%);
  --clr-gray:          hsl(53, 3%, 53%);
  --clr-gray-dark:     hsl(60, 3%, 36%);
  --clr-gray-darker:   hsl(60, 4%, 17%);

  /* ============================================================
     BLACK / WHITE — ALWAYS FIXED (ignore light/dark theme)
     ============================================================ */
  --clr-black-always:       hsl(249, 98%, 17%);
  --clr-black-always-soft:  hsl(249, 40%, 30%);
  --clr-white-always:       hsl(0, 0%, 100%);
  --clr-white-always-soft:  hsl(0, 0%, 94%);

  /* ============================================================
     EARTH TONE
     ============================================================ */
  --clr-earth-tone-antique: hsl(34, 78%, 91%);  /* matches "antiquewhite" keyword */

}