/* WPA design tokens v3, "Desert Night": the only source of color and type.
   The palette comes from the WPA logo: a desert dusk (navy, violet, magenta, orange, gold) over
   saguaro silhouettes, with fireworks in the sky. Night surfaces (header, heroes, footer) stay dark in
   both themes; page content follows the theme. data-theme="light|dark" on <html> overrides the device.
   Text/background pairs are WCAG AA (checked by axe in tests/e2e). */
:root {
  color-scheme: light dark;
  /* Brand */
  --brand-navy: #1b365d;
  --brand-gold: #ffc226;
  --brand-red: #ab2328;
  --brand-orange: #ff6720;
  --brand-ink: #101820;
  --dusk-violet: #6d3fa0;
  --dusk-magenta: #d23c7c;
  --white: #ffffff;

  /* Night (theme-independent) */
  --night-0: #05070f;
  --night-1: #0a0f1f;
  --night-2: #131a33;
  --night-3: #1f2a4d;
  --night-text: #eef1f8;
  --night-muted: #aab4cc;
  --night-line: rgb(255 255 255 / .12);
  --sunset: linear-gradient(100deg, #6d3fa0 0%, #d23c7c 35%, #ff6720 68%, #ffc226 100%);
  --sunset-soft: linear-gradient(100deg, rgb(109 63 160 / .9), rgb(210 60 124 / .9) 35%, rgb(255 103 32 / .9) 68%, rgb(255 194 38 / .9));
  --ember: linear-gradient(135deg, #ffd45e 0%, #ffc226 40%, #ff9a2e 100%);
  --sky: radial-gradient(120% 90% at 50% 120%, #4a2163 0%, #241443 28%, #0d1230 58%, #05070f 100%);

  /* Light theme (default) */
  --bg: #fbf7f0;
  --surface: #ffffff;
  --surface-2: #f3ece0;
  --border: #e5dac8;
  --text: #171a22;
  --text-muted: #565c6b;
  --heading: #0e1a33;
  --accent: #a3202a;
  --accent-hover: #6d3fa0;
  --cta: var(--brand-gold);
  --cta-text: #14100a;
  --cta-hover: #ffd35c;
  --chip-bg: #efe6d6;
  --focus: #6d3fa0;
  --success: #17683a;
  --danger: #a3202a;
  --warning: #9a6700;  /* amber text/borders: 4.9:1 on white (decision 2026-10-19) */
  --info: #1f5fa8;     /* blue text/borders: 6.1:1 on white */
  /* Form field borders (decision 2026-10-19): 3.2:1 on the white field, so a field's edge is visible (WCAG 1.4.11) */
  --field-border: #8b8f99;
  --shadow: 0 1px 2px rgb(23 26 34 / .05), 0 10px 30px -12px rgb(23 26 34 / .18);
  --shadow-lg: 0 2px 4px rgb(23 26 34 / .06), 0 30px 60px -20px rgb(23 26 34 / .35);
  --glow: 0 0 0 1px rgb(255 194 38 / .5), 0 12px 40px -8px rgb(255 103 32 / .45);
  --env-strip-bg: var(--brand-orange);
  --env-strip-text: var(--brand-ink);
  /* Checkboxes and radios (decision 2026-10-18): the tick drawn on the checked color (white on red/navy, ink on gold) */
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.1 3L12.8 4.6' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Scene: full-bleed fireworks photo behind standalone pages (sign-in, stage gate). Photos from Unsplash,
     credits in assets/backgrounds/CREDITS.md. Light: bursts in a blue dusk sky; dark: gold bursts on black. */
  --scene-image: url("/static/img/bg/fireworks-light-2560.webp");
  --scene-image-sm: url("/static/img/bg/fireworks-light-1280.webp");
  --scene-scrim: linear-gradient(180deg, rgb(10 15 31 / .05), rgb(10 15 31 / .25));
  --scene-glass: rgb(255 255 255 / .78);

  /* Category colors (schedule chips): readable text on the chip background in both themes */
  --cat-seminar: #6d3fa0; --cat-workshop: #c2410c; --cat-shooting: #b91c1c; --cat-display: #be185d;
  --cat-pit: #15803d; --cat-safety: #a16207; --cat-social: #0e7490; --cat-meeting: #475569;
  --cat-vendor: #7c2d12; --cat-registration: #334155; --cat-demonstration: #1d4ed8; --cat-lecture: #6d3fa0;
  --cat-avlecture: #6d3fa0;

  /* Type */
  --font-display: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Small text floors raised for older readers (decision 2026-10-19): fine print is never under 14px */
  --step--2: clamp(.875rem, .86rem + .08vw, .92rem);
  --step--1: clamp(.95rem, .93rem + .1vw, 1rem);
  --step-0: clamp(1rem, .97rem + .18vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.22rem + .9vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.75vw, 2.8rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);
  --step-5: clamp(2.8rem, 1.7rem + 5.5vw, 6.6rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --space: clamp(1rem, .75rem + 1.2vw, 1.75rem);
  --section: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);
  --container: 78rem;
  --prose: 68ch;
  --target: 44px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070b16; --surface: #0e1528; --surface-2: #151e38; --border: #243055;
    --text: #e7ebf4; --text-muted: #a2acc4; --heading: #ffffff;
    --accent: #ffcb47; --accent-hover: #ff8fb8; --chip-bg: #1a2443;
    --focus: #ffcb47; --success: #5ad28f; --danger: #ff8a8a; --warning: #f5b83d; --info: #8ab4ff; --field-border: #5b6a96;
    --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.1 3L12.8 4.6' fill='none' stroke='%23101820' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --scene-image: url("/static/img/bg/fireworks-dark-2560.webp"); --scene-image-sm: url("/static/img/bg/fireworks-dark-1280.webp");
    --scene-scrim: radial-gradient(80% 70% at 50% 50%, rgb(5 7 15 / .15), rgb(5 7 15 / .6)); --scene-glass: rgb(10 15 31 / .62);
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -12px rgb(0 0 0 / .6);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / .4), 0 30px 60px -20px rgb(0 0 0 / .8);
    --cat-seminar: #c4a5ff; --cat-workshop: #ffa36b; --cat-shooting: #ff8f8f; --cat-display: #ff8fc8;
    --cat-pit: #6ee7a0; --cat-safety: #ffd166; --cat-social: #67e3f9; --cat-meeting: #c0cbe0;
    --cat-vendor: #ffb38a; --cat-registration: #c0cbe0; --cat-demonstration: #93b4ff; --cat-lecture: #c4a5ff;
    --cat-avlecture: #c4a5ff;
  }
}
:root[data-theme="dark"] {
  --bg: #070b16; --surface: #0e1528; --surface-2: #151e38; --border: #243055;
  --text: #e7ebf4; --text-muted: #a2acc4; --heading: #ffffff;
  --accent: #ffcb47; --accent-hover: #ff8fb8; --chip-bg: #1a2443;
  --focus: #ffcb47; --success: #5ad28f; --danger: #ff8a8a; --warning: #f5b83d; --info: #8ab4ff; --field-border: #5b6a96;
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.1 3L12.8 4.6' fill='none' stroke='%23101820' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --scene-image: url("/static/img/bg/fireworks-dark-2560.webp"); --scene-image-sm: url("/static/img/bg/fireworks-dark-1280.webp");
    --scene-scrim: radial-gradient(80% 70% at 50% 50%, rgb(5 7 15 / .15), rgb(5 7 15 / .6)); --scene-glass: rgb(10 15 31 / .62);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -12px rgb(0 0 0 / .6);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / .4), 0 30px 60px -20px rgb(0 0 0 / .8);
  --cat-seminar: #c4a5ff; --cat-workshop: #ffa36b; --cat-shooting: #ff8f8f; --cat-display: #ff8fc8;
  --cat-pit: #6ee7a0; --cat-safety: #ffd166; --cat-social: #67e3f9; --cat-meeting: #c0cbe0;
  --cat-vendor: #ffb38a; --cat-registration: #c0cbe0; --cat-demonstration: #93b4ff; --cat-lecture: #c4a5ff;
  --cat-avlecture: #c4a5ff;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }