/* Every colour comes from the four Numina brand colours: blue #296BCC, indigo #2E2660, teal #22B2A4
   and white. Tints and shades are mixes of those four. The one exception is --miss (a wrong answer),
   the hub's danger red, because a wrong answer must not look like a right one.
   Light is the default; dark applies only when the learner picks it (data-theme="dark"). */
@font-face {
  font-family: "Bitter";
  src: url("../fonts/Bitter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --blue: #296bcc;
  --indigo: #2e2660;
  --teal: #22b2a4;
  --white: #ffffff;

  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;
  --font-serif: "Bitter", Georgia, serif;
  --radius: 0.75rem;
  --radius-lg: 1.125rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bg: color-mix(in srgb, var(--indigo) 3%, var(--white));
  --card: var(--white);
  --fg: color-mix(in srgb, var(--indigo) 90%, black);
  --ink: var(--indigo);
  --muted: color-mix(in srgb, var(--indigo) 5%, var(--white));
  --muted-fg: color-mix(in srgb, var(--indigo) 62%, var(--white));
  --border: color-mix(in srgb, var(--indigo) 12%, var(--white));
  --shadow: 0 6px 24px color-mix(in srgb, var(--indigo) 8%, transparent);

  --primary: var(--blue);
  --primary-fg: var(--white);
  --primary-deep: color-mix(in srgb, var(--blue) 70%, var(--indigo));
  --hero: var(--indigo);
  --hero-2: color-mix(in srgb, var(--indigo) 78%, var(--blue));
  --on-hero: color-mix(in srgb, var(--white) 86%, var(--indigo));
  --on-hero-soft: color-mix(in srgb, var(--white) 72%, var(--blue));

  /* Round and card tones */
  --tone-indigo: color-mix(in srgb, var(--indigo) 9%, var(--white)); --tone-indigo-fg: var(--indigo);
  --tone-blue: color-mix(in srgb, var(--blue) 11%, var(--white)); --tone-blue-fg: var(--primary-deep);
  --tone-teal: color-mix(in srgb, var(--teal) 15%, var(--white)); --tone-teal-fg: color-mix(in srgb, var(--teal) 45%, var(--indigo));
  --tone-deep: color-mix(in srgb, var(--indigo) 16%, var(--white)); --tone-deep-fg: var(--indigo);
  --tone-sky: color-mix(in srgb, color-mix(in srgb, var(--blue) 50%, var(--teal)) 13%, var(--white)); --tone-sky-fg: color-mix(in srgb, var(--blue) 55%, var(--indigo));

  /* Word faces */
  --face-ink: var(--indigo);
  --face-1: color-mix(in srgb, var(--blue) 45%, var(--white));
  --face-2: color-mix(in srgb, var(--teal) 55%, var(--white));
  --face-3: color-mix(in srgb, color-mix(in srgb, var(--blue) 50%, var(--teal)) 50%, var(--white));
  --highlight: color-mix(in srgb, var(--teal) 32%, var(--white));

  --root-bg: var(--tone-teal);
  --root-fg: var(--tone-teal-fg);
  --good: color-mix(in srgb, var(--teal) 60%, var(--indigo));
  --good-bg: var(--tone-teal);
  --miss: #c2414b;
  --miss-bg: #fbecee;
  --danger: #e7515a;
}

:root[data-theme="dark"] {
  --bg: color-mix(in srgb, var(--indigo) 55%, black);
  --card: color-mix(in srgb, var(--indigo) 75%, black);
  --fg: color-mix(in srgb, var(--white) 90%, var(--indigo));
  --ink: var(--white);
  --muted: color-mix(in srgb, var(--indigo) 85%, var(--white) 5%);
  --muted-fg: color-mix(in srgb, var(--white) 62%, var(--indigo));
  --border: color-mix(in srgb, var(--indigo) 70%, var(--white) 18%);
  --shadow: 0 6px 24px rgba(0, 0, 0, .3);
  --hero: color-mix(in srgb, var(--indigo) 92%, var(--blue));

  --tone-indigo: color-mix(in srgb, var(--indigo) 85%, var(--white) 8%); --tone-indigo-fg: color-mix(in srgb, var(--white) 80%, var(--indigo));
  --tone-blue: color-mix(in srgb, var(--blue) 28%, var(--indigo)); --tone-blue-fg: color-mix(in srgb, var(--white) 75%, var(--blue));
  --tone-teal: color-mix(in srgb, var(--teal) 25%, var(--indigo)); --tone-teal-fg: color-mix(in srgb, var(--white) 70%, var(--teal));
  --tone-deep: color-mix(in srgb, var(--indigo) 70%, black); --tone-deep-fg: color-mix(in srgb, var(--white) 85%, var(--indigo));
  --tone-sky: color-mix(in srgb, var(--teal) 18%, color-mix(in srgb, var(--blue) 22%, var(--indigo))); --tone-sky-fg: color-mix(in srgb, var(--white) 75%, var(--teal));

  --good: color-mix(in srgb, var(--teal) 70%, var(--white));
  --miss: #f08a92;
  --miss-bg: color-mix(in srgb, #c2414b 22%, var(--indigo));
}