/* Design tokens. Owned by the Visual Designer. See docs/style-guide.md.
   Light theme on :root; dark theme via prefers-color-scheme (unless the visitor chose light)
   and via [data-theme="dark"]. Keep the two dark blocks identical. */

/* Fonts: self-hosted, SIL Open Font License 1.1 (licence files in ../fonts/). */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-mono-latin-600-normal.woff2) format("woff2"); }

:root {
  /* Type */
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-fig: var(--font);
  --fs-xs: .78rem;   /* tags, credits */
  --fs-sm: .875rem;  /* meta, captions, rail */
  --fs-md: 1rem;     /* body (17px phone, 18px desktop) */
  --fs-lg: 1.2rem;   /* "The idea", lede */
  --fs-h3: 1.15rem;
  --fs-h2: 1.5rem;
  --fs-h1: clamp(1.85rem, 1.2rem + 2.6vw, 2.6rem);
  --lh: 1.6;
  --lh-tight: 1.2;
  --measure: 70ch;

  /* Space (4 px based) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --gutter: 16px;
  --page-max: 1140px;
  --rail: 240px;

  /* Shape */
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow: 0 1px 2px rgb(15 31 58 / .06), 0 2px 8px rgb(15 31 58 / .05);

  /* Base colours (light) */
  --bg: #f3f6fa;  --surface: #ffffff; --surface-2: #eaf0f7;
  --ink: #0f1f3a; --muted: #4a5970;
  --line: #d3dce8; --line-strong: #738298;
  --accent: #1559c2; --accent-ink: #ffffff; --accent-bg: #e3eefc; --sky: #6db7f2;
  --focus: #c24e00;
  --header-bg: #0f1f3a; --header-ink: #ffffff; --header-muted: #b9c8dc; --header-accent: #8cc8ff; --header-focus: #ffb547;
  /* Brand mark (attitude indicator): same in both themes, always shown on the navy header */
  --brand-sky: #8cc8ff; --brand-earth: #8a5a30; --brand-mark: #ffb547; --brand-ring: #8cc8ff; --brand-ink: #0f1f3a;

  /* Callouts: text colour + tinted background */
  --rule: #1f4fb5;      --rule-bg: #e7eefc;
  --practice: #176a47;  --practice-bg: #e2f3ea;
  --aircraft: #8a4b00;  --aircraft-bg: #fbf0dd;
  --example: #0a6176;   --example-bg: #e0f2f6;
  --trap: #ac2f17;      --trap-bg: #fce8e3;
  --real: #46546a;      --real-bg: #ebeff4;
  --explain: #6233c4;   --explain-bg: #efe9fc;
  --national: #8b1e4b;  --national-bg: #fbe9f0;
  --verify: #6f5300;    --verify-bg: #ffefb0;

  /* Figures (Layer C): colours only through these tokens */
  --fig-sky: #e4f0fb;      /* sky / figure background */
  --fig-stroke: #18294a;   /* outlines and default label text */
  --fig-fill: #ffffff;     /* body of aircraft, buildings, boxes */
  --fig-cloud: #ffffff;
  --fig-cloud-dark: #a3b0c2; /* cloud bases, Cb, rain cloud */
  --fig-accent: #1559c2;   /* the thing to notice: dimensions, key vectors, highlights */
  --fig-accent-2: #8a2a9e; /* second series or second highlight */
  --fig-ground: #ddd5c2;
  --fig-terrain: #b7c99f;
  --fig-water: #9fcbec;
  --fig-paved: #5d6a7f;
  --fig-marking: #ffffff;
  --fig-sun: #f2b43c;
  --fig-moon: #f1e3a6;
  --fig-warn: #b8321c;     /* danger, wrong, limit exceeded */
  --fig-ok: #1a7246;       /* safe, correct, within limits */
  --fig-muted: #5a6880;    /* secondary lines and labels */
  --fig-grid: #c4d3e4;     /* chart grid, construction lines */
  /* Aerodrome signs and markings: meaning colours, identical in light and dark (not redefined in the dark blocks) */
  --fig-sign-red: #d7182a;    /* mandatory instruction sign face */
  --fig-sign-yellow: #fbe21b; /* information sign face; taxiway markings */
  --fig-sign-black: #25282c;  /* location sign face; sign lettering on yellow */
  --fig-sign-white: #ffffff;  /* lettering on red; runway markings */
  --fig-sign-pave: #4b5058;   /* dark pavement, same in both themes so white and yellow stay correct */
  color-scheme: light;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1322;  --surface: #101c30; --surface-2: #172640;
    --ink: #e4ecf7; --muted: #a1b2c8;
    --line: #26364f; --line-strong: #6c7f9a;
    --accent: #80bfff; --accent-ink: #0a1322; --accent-bg: #15294a; --sky: #4f9be0;
    --focus: #ffb547;
    --header-bg: #0d1829; --header-ink: #e4ecf7; --header-muted: #a1b2c8; --header-accent: #80bfff; --header-focus: #ffb547;
    --rule: #9ab8ff;      --rule-bg: #16264a;
    --practice: #72d6a8;  --practice-bg: #0f2b20;
    --aircraft: #f2b660;  --aircraft-bg: #2d2311;
    --example: #6fd2e8;   --example-bg: #0d2a33;
    --trap: #ff9c84;      --trap-bg: #36190f;
    --real: #bcc7d6;      --real-bg: #1b2535;
    --explain: #bba1ff;   --explain-bg: #241b44;
    --national: #ff9cc4;  --national-bg: #34152a;
    --verify: #ffd84d;    --verify-bg: #352c06;
    --fig-sky: #12213a; --fig-stroke: #d3dfee; --fig-fill: #23334f; --fig-cloud: #4a5b78; --fig-cloud-dark: #2f3c55;
    --fig-accent: #80bfff; --fig-accent-2: #e09cff; --fig-ground: #3a3a30; --fig-terrain: #33482f; --fig-water: #1c4268;
    --fig-paved: #6a7891; --fig-marking: #e8eef7; --fig-sun: #e8b24a; --fig-moon: #e6dcb3;
    --fig-warn: #ff8d73; --fig-ok: #6fd6a2; --fig-muted: #9badc5; --fig-grid: #2b3e5c;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 2px 10px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}
/* Explicit choice from the theme toggle. Screen only: print always uses the light tokens. */
@media screen {
  :root[data-theme="dark"] {
    --bg: #0a1322;  --surface: #101c30; --surface-2: #172640;
    --ink: #e4ecf7; --muted: #a1b2c8;
    --line: #26364f; --line-strong: #6c7f9a;
    --accent: #80bfff; --accent-ink: #0a1322; --accent-bg: #15294a; --sky: #4f9be0;
    --focus: #ffb547;
    --header-bg: #0d1829; --header-ink: #e4ecf7; --header-muted: #a1b2c8; --header-accent: #80bfff; --header-focus: #ffb547;
    --rule: #9ab8ff;      --rule-bg: #16264a;
    --practice: #72d6a8;  --practice-bg: #0f2b20;
    --aircraft: #f2b660;  --aircraft-bg: #2d2311;
    --example: #6fd2e8;   --example-bg: #0d2a33;
    --trap: #ff9c84;      --trap-bg: #36190f;
    --real: #bcc7d6;      --real-bg: #1b2535;
    --explain: #bba1ff;   --explain-bg: #241b44;
    --national: #ff9cc4;  --national-bg: #34152a;
    --verify: #ffd84d;    --verify-bg: #352c06;
    --fig-sky: #12213a; --fig-stroke: #d3dfee; --fig-fill: #23334f; --fig-cloud: #4a5b78; --fig-cloud-dark: #2f3c55;
    --fig-accent: #80bfff; --fig-accent-2: #e09cff; --fig-ground: #3a3a30; --fig-terrain: #33482f; --fig-water: #1c4268;
    --fig-paved: #6a7891; --fig-marking: #e8eef7; --fig-sun: #e8b24a; --fig-moon: #e6dcb3;
    --fig-warn: #ff8d73; --fig-ok: #6fd6a2; --fig-muted: #9badc5; --fig-grid: #2b3e5c;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 2px 10px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}