/* ═══════════════════════════════════════════════════════════
   DOORS Canada · core stylesheet
   Loaded by EVERY page on the site, before site.css (browsing
   pages) or lesson.css (lessons and games).

   This file holds only the things that must stay identical
   everywhere: brand colours, fonts, the CSS reset, and focus
   styles. Change a colour here and the whole site follows.

   CACHE-BUSTING: pages link stylesheets as e.g. "site.css?v=1".
   Whenever ANY stylesheet changes, bump the number in every
   HTML file so browsers fetch the fresh copy:
     grep -rl 'css?v=' --include='*.html' . | xargs sed -i '' 's/css?v=1/css?v=2/g'
   ═══════════════════════════════════════════════════════════ */
@import url("../fonts/atkinson.css");
:root {
  /* ── Strong brand colours (headers, buttons, accents) ── */
  --purple: #351D5B;
  --blue:   #118AB2;
  --green:  #24634C;
  --orange: #D96500;
  --pink:   #CB3275;

  /* ── Pale companions (backgrounds, chips, callouts) ── */
  --p-blue:   #B7DCE8;   /* instructions, tips, guidance */
  --p-green:  #B4F3E2;   /* progress, growth, success */
  --p-yellow: #FFE8B2;   /* encouragement, warmth */
  --p-pink:   #F5D6E3;   /* reassurance, support */
  --p-purple: #D9C6F4;   /* reflection, inclusion */

  /* ── Neutrals ── */
  --ink:  #212121;
  --mid:  #555555;
  --line: #E0E0E0;
  --bg:   #F5F5F5;

  /* ── Surfaces and chrome ──
     These are the things that actually flip in dark mode. The brand
     colours above say what a colour means; these say what a surface is. */
  --surface:    #FFFFFF;   /* cards and page backgrounds */
  --bar:        #1d5340;   /* site-nav and slimbar */
  --link:       #118AB2;
  --link-hover: #0C6A8A;
  --shadow:     rgba(0, 0, 0, .10);
  --card-tint:  #E7EEEB;   /* the pale green on "here" states */
  --hero-ink:   #404040;   /* hero description, darker than --mid */

  /* The "here" row tints itself, and the pill on it returns to the card
     colour so it still reads as a pill. In light that is plain --surface;
     in dark, --surface and --card-tint are 1.009:1 apart and the pill
     disappears, so dark needs its own value. Same name either way. */
  --chip-on-tint: #FFFFFF;

  /* Shares a hex with --bar by coincidence, not by meaning: this is the
     solid button darkened on hover, a shade of --green. Pointing it at
     --bar would drag it to black in dark mode and swallow the label. */
  --btn-solid-hover: #1d5340;

  /* ── Fixed: identical in both themes ──
     Never add these to the dark block. The bar is dark in BOTH modes
     (green in light, black in dark), so what sits on it never inverts.
     Leaving them out of that block is what makes them un-flippable —
     declaring the same hex twice would only invite one copy to drift. */
  --bar-ink-white:     #FFFFFF;   /* text on the bar */
  --bar-accent-yellow: #FFE8B2;   /* tagline, active-page underline */

  /* ── Chip pairs ──
     A pale fill and the dark text on it have to flip together, so they
     are declared together. Pointing the ink half at a brand colour
     would break the pairing the moment the theme changes. */
  --chip-blue-bg:   #B7DCE8;  --chip-blue-ink:   #0C5A75;
  --chip-green-bg:  #B4F3E2;  --chip-green-ink:  #173F31;
  --chip-yellow-bg: #FFE8B2;  --chip-yellow-ink: #5C4300;
  --chip-amber-ink: #8A4200;  /* .tag-game, sits on chip-yellow-bg */
  --chip-pink-bg:   #F5D6E3;  --chip-pink-ink:   #7A1F4B;

  /* ── Tinted borders that pair with a pale fill ── */
  --edge-blue:   #9CC9D9;
  --edge-yellow: #E0D88A;
  --edge-pink:   #DCA8C4;

  /* ── Font stacks (see Server/TEXT.md for the pairing rationale) ── */
  --font-heading: Verdana, Geneva, sans-serif;
  --font-body: "Sylexiad Serif Medium", Georgia, serif;
  --font-lesson: "Atkinson Hyperlegible", Verdana, Geneva, sans-serif;
}

/* Sylexiad is the site's body/reading face. Atkinson Hyperlegible
   (used inside lessons) loads separately via fonts/atkinson.css. */
@font-face {
  font-family: "Sylexiad Serif Medium";
  src: url("../fonts/sylexiad-serif-medium.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Sylexiad Serif Medium";
  src: url("../fonts/sylexiad-serif-medium-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* A visible focus ring everywhere — many DOORS learners navigate
   by keyboard or switch device, so never remove this. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* On the bars the blue ring is 2.24:1, under the 3:1 floor for a UI
   indicator, so links there take the bar accent instead — 7.38:1 on
   the green bar, higher still on the black one. */
.site-nav :focus-visible,
.slimbar :focus-visible {
  outline-color: var(--bar-accent-yellow);
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME
   Set by an inline script in each page's <head> before first
   paint, from localStorage or prefers-color-scheme. Redefines
   the properties above; every rule in site.css and lesson.css
   follows automatically because none of them hardcode a colour.

   --bar-ink-white and --bar-accent-yellow are deliberately
   ABSENT. The bar is dark in both modes, so what sits on it
   never inverts, and leaving them out is what guarantees it.
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* brand colours lifted so they read on a dark surface */
  --purple: #BFA3F0;
  --blue:   #5CC6EA;
  --green:  #63D2AB;
  --orange: #FFA057;
  --pink:   #F58BB4;

  /* pale companions become dark tinted fills */
  --p-blue:   #17313C;
  --p-green:  #15332A;
  --p-yellow: #3B3119;
  --p-pink:   #3B232E;
  --p-purple: #2B2242;

  --ink:  #E9E7E3;
  --mid:  #ABA7A1;
  --line: #34383D;
  --bg:   #131519;

  --surface:    #23272E;
  --bar:        #000000;
  --link:       #5CC6EA;
  --link-hover: #8FDBF2;
  --shadow:     rgba(0, 0, 0, .45);
  --card-tint:  #1E2A25;
  --hero-ink:   #C9C5BF;

  /* 1.184:1 against --card-tint, which is what --surface on --card-tint
     measures in light mode. The pill separates by the same amount in both
     themes rather than vanishing into its row. */
  --chip-on-tint: #2E343C;

  /* --chip-on-tint was tuned against --card-tint and only --card-tint. A
     lesson's "here" row repaints itself in that lesson's colour instead
     (.navitem.here.cN in lesson.css), and one grey cannot separate from six
     different tints: measured against them it ran 1.020:1 to 1.186:1 while
     light mode ran 1.178:1 to 1.575:1. So each row gets its own pill,
     derived the same way --chip-on-tint was — the row's own hue lifted
     until it separates by what white separates from that row's pale
     companion in light mode.

     Dark-only on purpose, like --on-brand-ink. Light mode already has one
     pill colour that works on every row, and it keeps the single rule it
     has always had; adding a light half here would be five more names for
     the same #FFFFFF and five more chances for one of them to drift.

     Each is named for the row it sits on, not for the colour it is. Every
     pairing is in check-contrast.py — the pill against its row, and the
     chip's label against the pill. */
  --chip-on-blue:   #304A55;   /* on --p-blue,   1.451:1 (light 1.457) */
  --chip-on-green:  #244239;   /* on --p-green,  1.243:1 (light 1.246) */
  --chip-on-yellow: #473D25;   /* on --p-yellow, 1.197:1 (light 1.204) */
  --chip-on-pink:   #4F3742;   /* on --p-pink,   1.335:1 (light 1.345) */

  /* The one that does not reach its light-mode figure. --p-purple's label is
     --purple itself, which is the lightest of the five inks, so lifting the
     pill to 1.575:1 would drop that label to 4.38:1 and trade a visible pill
     for unreadable text. Held at the point where the label still clears AA. */
  --chip-on-purple: #473E5E;   /* on --p-purple, 1.502:1 (light 1.575) */

  /* Light mode darkens the solid button on hover, lifting it from 7.08:1
     to 8.88:1 against its white text. In dark mode the button is a light
     mint with dark text, so the same intent means LIGHTENING: 9.71:1 to
     10.99:1 against Task 6's #14171B. */
  --btn-solid-hover: #7EDCBB;

  /* The one ink that sits on a strong brand fill — buttons, card titles,
     the bookmark bar, the bridge. Named rather than repeated as a literal
     so check-contrast.py can test it against every fill it lands on. */
  --on-brand-ink: #14171B;

  /* The bridge link's hover state. Light mode moves the link from white to
     the pale purple companion; dark mode inverts that, moving from the
     near-black ink to a purple-tinted one. Named for the same reason
     --on-brand-ink is: it lands on --purple, so it has to be measurable. */
  --on-brand-ink-hover: #3A2F52;

  /* chip pairs invert together: pale fill becomes a dark tint,
     dark ink becomes a light one */
  --chip-blue-bg:   #17313C;  --chip-blue-ink:   #9BD9EC;
  --chip-green-bg:  #15332A;  --chip-green-ink:  #8FE3C6;
  --chip-yellow-bg: #3B3119;  --chip-yellow-ink: #F2D48A;
  --chip-amber-ink: #FFB877;
  --chip-pink-bg:   #3B232E;  --chip-pink-ink:   #F3AFC8;

  --edge-blue:   #2C4A57;
  --edge-yellow: #4E4224;
  --edge-pink:   #55333F;

  color-scheme: dark;
}

/* Without this, any gap between sections falls through to the browser
   canvas and renders light no matter what body says. Real bug in the
   mockup. Scoped to dark on purpose: min-height on html is a live
   layout change, and everyday-gestures loads this file. */
html[data-theme="dark"] { background: var(--surface); min-height: 100%; }