/* ============================================================
   Kingdom Quiz: design tokens

   Everything visual comes from the variables in this file.
   To restyle the site, change values here (see docs/CUSTOMIZING.md).

   Brand: a prime-time quiz show staged in a cathedral's light.
   The four answer colors are the four colors of the RCCG emblem
   (red, blue, gold, green), and they also make up the rose-window
   logo. Navy is the stage; white is the page.
   ============================================================ */

/* ---------- Fonts (self-hosted, SIL Open Font License) ----------
   Bricolage Grotesque: display + headings
   Instrument Sans:     body + interface
   Licenses live next to the files in assets/fonts/. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Raw palette ---------- */
  --navy-950: #050e22;
  --navy-900: #081a3a;
  --navy-800: #0b2147;
  --navy-700: #0d2b57;   /* RCCG blue, used for text on light */
  --navy-600: #17407f;

  --blue-700: #174488;
  --blue-600: #1e56a8;   /* primary */
  --blue-500: #2d6fd6;
  --blue-300: #7fb0ff;
  --blue-100: #e6eefb;

  --red-700: #a50d26;
  --red-600: #c8102e;    /* RCCG red */
  --red-300: #ff8a8a;
  --red-100: #fde8eb;

  --green-700: #17653a;
  --green-600: #1e7a46;  /* RCCG green */
  --green-300: #4ade9a;
  --green-100: #e1f3e7;

  --gold-700: #8a5a00;
  --gold-500: #f2ac1f;   /* gold: highlights, crown, answer C */
  --gold-300: #f6c453;
  --gold-100: #fff3d6;

  /* Neutral scale (slightly blue, to sit with the navy) */
  --n-0: #ffffff;
  --n-50: #f3f5f9;
  --n-100: #e8ecf3;
  --n-200: #d6dce8;
  --n-300: #b8c1d3;
  --n-400: #8d99b0;
  --n-500: #66738e;
  --n-600: #4b5870;
  --n-700: #343f55;
  --n-800: #1f2940;
  --n-900: #101830;

  /* Answer tile colors: A red, B blue, C gold, D green.
     Letters on them are white, except on gold (navy). All pass WCAG AA. */
  --opt-a: var(--red-600);
  --opt-b: var(--blue-600);
  --opt-c: var(--gold-500);
  --opt-d: var(--green-600);
  --on-opt-a: #ffffff;
  --on-opt-b: #ffffff;
  --on-opt-c: var(--navy-900);
  --on-opt-d: #ffffff;

  /* The quiz stage is always dark, in light and dark mode */
  --stage-bg: radial-gradient(ellipse 120% 90% at 50% -15%, #2a3a68 0%, #131b34 52%, #0b1024 100%);
  --stage-solid: #0b1024;
  --stage-text: #ffffff;
  --stage-muted: #b9c4de;
  --stage-line: rgb(255 255 255 / 0.2);
  --stage-gold: var(--gold-300);

  /* ---------- Typography ---------- */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (min at 320px, max at 1440px) */
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.5vw, 3.6rem);
  --step-5: clamp(3rem, 2.1rem + 4.5vw, 5.6rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* ---------- Shape ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --border-w: 1px;
  --container: 1200px;
  --container-narrow: 680px;
  --header-h: 72px;
  --header-h-small: 56px;
  --tap: 44px;   /* minimum touch target */

  /* ---------- Layering ---------- */
  --z-base: 1;
  --z-header: 20;
  --z-dialog: 40;
  --z-toast: 60;
  --z-popup: 70;
  --z-confetti: 80;

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
  --dur-stage: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ============================================================
   Themes. The attribute data-theme is set before first paint by
   js/theme-init.js. The media query below only matters when
   JavaScript is switched off.
   ============================================================ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: var(--n-0);
  --bg-subtle: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --text: var(--navy-700);
  --text-strong: var(--navy-900);
  --text-muted: var(--n-600);
  --border: var(--n-200);
  --border-strong: var(--n-300);

  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --on-primary: #ffffff;
  --accent: var(--gold-500);
  --on-accent: var(--navy-900);
  --link: var(--blue-600);
  --focus: var(--blue-600);

  --success: var(--green-600);
  --success-bg: var(--green-100);
  --success-text: var(--green-700);
  --danger: var(--red-600);
  --danger-bg: var(--red-100);
  --danger-text: var(--red-700);
  --warning: var(--gold-700);
  --warning-bg: var(--gold-100);
  --info: var(--blue-600);
  --info-bg: var(--blue-100);

  --header-bg: rgb(255 255 255 / 0.78);
  --overlay: rgb(8 26 58 / 0.62);
  --selection: rgb(30 86 168 / 0.22);
  --glow-1: rgb(200 16 46 / 0.07);
  --glow-2: rgb(30 86 168 / 0.09);
  --glow-3: rgb(30 122 70 / 0.07);

  --shadow-1: 0 1px 2px rgb(13 43 87 / 0.06), 0 2px 8px -2px rgb(13 43 87 / 0.08);
  --shadow-2: 0 2px 4px rgb(13 43 87 / 0.05), 0 12px 28px -10px rgb(13 43 87 / 0.2);
  --shadow-3: 0 4px 8px rgb(13 43 87 / 0.06), 0 30px 60px -24px rgb(13 43 87 / 0.35);
  --shadow-stage: 0 40px 80px -30px rgb(5 8 20 / 0.7);
}

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

  --bg: #060f24;
  --bg-subtle: #0a1730;
  --surface: #0c1a3a;
  --surface-2: #11224a;
  --text: #eaf0fb;
  --text-strong: #ffffff;
  --text-muted: #a3b1cc;
  --border: #1d3260;
  --border-strong: #2d4680;

  --primary: var(--blue-500);
  --primary-hover: #4684e6;
  --on-primary: #ffffff;
  --accent: var(--gold-500);
  --on-accent: var(--navy-900);
  --link: var(--blue-300);
  --focus: var(--gold-300);

  --success: var(--green-300);
  --success-bg: rgb(74 222 154 / 0.14);
  --success-text: var(--green-300);
  --danger: var(--red-300);
  --danger-bg: rgb(255 138 138 / 0.14);
  --danger-text: var(--red-300);
  --warning: var(--gold-300);
  --warning-bg: rgb(246 196 83 / 0.14);
  --info: var(--blue-300);
  --info-bg: rgb(127 176 255 / 0.14);

  --header-bg: rgb(6 15 36 / 0.78);
  --overlay: rgb(2 6 18 / 0.72);
  --selection: rgb(246 196 83 / 0.3);
  --glow-1: rgb(200 16 46 / 0.12);
  --glow-2: rgb(45 111 214 / 0.16);
  --glow-3: rgb(30 122 70 / 0.12);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.3), 0 14px 30px -10px rgb(0 0 0 / 0.55);
  --shadow-3: 0 4px 8px rgb(0 0 0 / 0.3), 0 34px 64px -24px rgb(0 0 0 / 0.7);
  --shadow-stage: 0 40px 80px -30px rgb(0 0 0 / 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #060f24;
    --bg-subtle: #0a1730;
    --surface: #0c1a3a;
    --surface-2: #11224a;
    --text: #eaf0fb;
    --text-strong: #ffffff;
    --text-muted: #a3b1cc;
    --border: #1d3260;
    --border-strong: #2d4680;
    --primary: var(--blue-500);
    --primary-hover: #4684e6;
    --link: var(--blue-300);
    --focus: var(--gold-300);
    --success: var(--green-300);
    --success-bg: rgb(74 222 154 / 0.14);
    --success-text: var(--green-300);
    --danger: var(--red-300);
    --danger-bg: rgb(255 138 138 / 0.14);
    --danger-text: var(--red-300);
    --warning: var(--gold-300);
    --warning-bg: rgb(246 196 83 / 0.14);
    --info: var(--blue-300);
    --info-bg: rgb(127 176 255 / 0.14);
    --header-bg: rgb(6 15 36 / 0.78);
    --overlay: rgb(2 6 18 / 0.72);
    --selection: rgb(246 196 83 / 0.3);
    --glow-1: rgb(200 16 46 / 0.12);
    --glow-2: rgb(45 111 214 / 0.16);
    --glow-3: rgb(30 122 70 / 0.12);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.3), 0 14px 30px -10px rgb(0 0 0 / 0.55);
    --shadow-3: 0 4px 8px rgb(0 0 0 / 0.3), 0 34px 64px -24px rgb(0 0 0 / 0.7);
    --shadow-stage: 0 40px 80px -30px rgb(0 0 0 / 0.8);
  }
}