/* Stare of Owls / TEN3 brand tokens. Every other stylesheet reads from here
   and defines no colours of its own.

   The brand colour is #2a2a6b, taken from the TEN3 logo, which is monochrome
   line art in that one colour. It has no white variant, so the logo is only
   ever placed on a light background.

   Gold is the secondary, in three weights because one gold cannot do three
   jobs: --gold fills shapes, --gold-bright is gold seen against navy, and
   --gold-ink is the only gold legible as text on white. Using --gold for
   body text would drop it to roughly 2.4:1 against white, which is not
   readable; --gold-ink clears the 4.5:1 mark. */

:root {
  /* brand. --navy fills shapes and stays dark in both themes, so white text on
     it is always right. --navy-ink is the same brand colour doing the other
     job: navy as READING TEXT, which has to invert when the page does. One
     token cannot do both, the same lesson gold already taught below. */
  --navy: #2a2a6b;
  --navy-ink: #2a2a6b;
  --navy-deep: #1b1b47;
  --navy-mid: #40408a;
  --navy-soft: #8a8ac4;
  --navy-wash: #eeeef7;

  /* secondary */
  --gold: #d4a12a;
  --gold-bright: #f2c75c;
  --gold-ink: #7a5c0d;
  --gold-wash: #fbf3de;

  /* surfaces and text */
  --paper: #faf8f3;
  --card: #ffffff;
  --edge: #e3ded1;
  --ink: #20223a;
  --ink-soft: #5c6076;
  --wrong: #b5432f;

  /* The one green. It acknowledges a right answer and nothing else — it never
     accumulates into a streak, a badge or a score, which PDF p32 rules out.
     --right-ink is the shade legible as text on white; --right is for a filled
     disc, where the tick sits on the colour rather than in it. */
  --right: #2f7d55;
  --right-ink: #1f5c3d;
  --right-wash: #e6f2ea;

  /* Text that sits on a --navy fill. White on navy in daylight, and still
     white in the dark, because --navy does not lighten. */
  --on-navy: #ffffff;

  /* The full-width feature band. It is a --navy fill in daylight, but in the
     dark --navy is lifted so small buttons stay visible against dark paper,
     and a whole band at that lightness shouts. So the band recedes instead. */
  --band-bg: #2a2a6b;

  /* Quieter text on a --navy fill — the home page's band, the curriculum
     page's tab strip. Lighter than --on-navy but still white-ish. */
  --on-navy-dim: #cfcfe8;

  /* The planner's "not saved" state. */
  --warn-wash: #fbeeea;
  --warn-ink: #8d3421;

  /* The curriculum badges. Each says what kind of work a section is, so they
     have to stay apart from one another in both themes. */
  --badge-oral-bg: #eeeef7;
  --badge-oral-fg: #2a2a6b;
  --badge-physical-bg: #e6f2ea;
  --badge-physical-fg: #23604a;
  --badge-written-bg: #f6e3de;
  --badge-written-fg: #8d3421;
  --badge-reference-bg: #edeae2;
  --badge-reference-fg: #5b5546;
  --badge-science-bg: #e4eef6;
  --badge-science-fg: #24567c;
  --badge-faith-bg: #efe6f4;
  --badge-faith-fg: #5a3372;

  /* type */
  --face: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --face-num: "Segoe UI", system-ui, sans-serif;

  /* shape */
  --radius: 0.65rem;
  --radius-lg: 1rem;
  --lift: 0 1px 2px rgb(32 34 58 / 0.06), 0 6px 18px rgb(32 34 58 / 0.06);
  --lift-hover: 0 2px 4px rgb(32 34 58 / 0.08), 0 12px 28px rgb(32 34 58 / 0.12);

  /* rhythm */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 42rem;
}

/* ---- dark ----

   Three states, because there are three. A device set to dark gets dark
   through the media query alone, with no JavaScript and no flash. An explicit
   choice stamps data-theme on the root element and wins in either direction,
   which is why the media query is guarded against data-theme="light" — without
   that guard a person choosing light on a dark phone would be overruled.

   Only the tokens move. No rule outside this block knows which theme is on,
   and that is the whole reason this was a small change rather than a rewrite.

   --navy deliberately does NOT invert. It is a fill, it stays dark, and the
   white text on it stays white. Only --navy-ink, navy in its reading-text
   role, lightens. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #3b3b8c;
    --navy-ink: #b9b9ee;
    --navy-deep: #2a2a6b;
    --navy-mid: #4d4da3;
    --navy-soft: #7676bd;
    --navy-wash: #1e2043;

    --gold: #d4a12a;
    --gold-bright: #f2c75c;
    --gold-ink: #e6bd63;
    --gold-wash: #332a12;

    --paper: #101126;
    --card: #191b38;
    --edge: #343765;
    --ink: #e9e9f4;
    --ink-soft: #a8abc7;
    --wrong: #ff8f7a;

    --right: #2f7d55;
    --right-ink: #7fd6a5;
    --right-wash: #16301f;

    --on-navy-dim: #cfcfe8;
    --band-bg: #1b1d3d;

    --warn-wash: #3a221c;
    --warn-ink: #f0a48c;

    --badge-oral-bg: #24264d;
    --badge-oral-fg: #b9b9ee;
    --badge-physical-bg: #17301f;
    --badge-physical-fg: #8fd8ae;
    --badge-written-bg: #33201a;
    --badge-written-fg: #f0a48c;
    --badge-reference-bg: #2b2a24;
    --badge-reference-fg: #cdc7b5;
    --badge-science-bg: #16283a;
    --badge-science-fg: #9ccbe8;
    --badge-faith-bg: #2a1d34;
    --badge-faith-fg: #ceaae0;

    --lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px rgb(0 0 0 / 0.35);
    --lift-hover: 0 2px 4px rgb(0 0 0 / 0.45), 0 12px 28px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  --navy: #3b3b8c;
  --navy-ink: #b9b9ee;
  --navy-deep: #2a2a6b;
  --navy-mid: #4d4da3;
  --navy-soft: #7676bd;
  --navy-wash: #1e2043;

  --gold: #d4a12a;
  --gold-bright: #f2c75c;
  --gold-ink: #e6bd63;
  --gold-wash: #332a12;

  --paper: #101126;
  --card: #191b38;
  --edge: #343765;
  --ink: #e9e9f4;
  --ink-soft: #a8abc7;
  --wrong: #ff8f7a;

  --right: #2f7d55;
  --right-ink: #7fd6a5;
  --right-wash: #16301f;

  --on-navy-dim: #cfcfe8;
  --band-bg: #1b1d3d;

  --warn-wash: #3a221c;
  --warn-ink: #f0a48c;

  --badge-oral-bg: #24264d;
  --badge-oral-fg: #b9b9ee;
  --badge-physical-bg: #17301f;
  --badge-physical-fg: #8fd8ae;
  --badge-written-bg: #33201a;
  --badge-written-fg: #f0a48c;
  --badge-reference-bg: #2b2a24;
  --badge-reference-fg: #cdc7b5;
  --badge-science-bg: #16283a;
  --badge-science-fg: #9ccbe8;
  --badge-faith-bg: #2a1d34;
  --badge-faith-fg: #ceaae0;

  --lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px rgb(0 0 0 / 0.35);
  --lift-hover: 0 2px 4px rgb(0 0 0 / 0.45), 0 12px 28px rgb(0 0 0 / 0.5);
}

/* The TEN3 logo is line art stroked in #2a2a6b and has no white variant, so
   the rule has always been that it sits only on a light background. Dark mode
   does not get to break that: the mark keeps a light plaque under it rather
   than being inverted or recoloured into a logo TEN3 does not have. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark,
  :root:not([data-theme="light"]) .hero-mark {
    background: #f2f1ec;
    border-radius: var(--radius);
    padding: 0.3rem;
  }
}

:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .hero-mark {
  background: #f2f1ec;
  border-radius: var(--radius);
  padding: 0.3rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* Tells the browser which themes the page supports, so its own furniture —
   scrollbars, form controls, the canvas behind the page — follows suit. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--face);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--navy-ink); text-underline-offset: 0.15em; }
a:hover { color: var(--gold-ink); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Honour a device set to reduce motion. Site-wide rather than per-activity,
   because a child who needs this needs it on every page — the landing squares
   in Pattern Painter, the shake on a wrong answer, and the acknowledgement in
   Any Order are all animations, and they live in three different stylesheets. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}