/*
  Axvoid Learn — colour tokens (AxvoidLearn theme; design basis of 2026-10-30)

  Theme file of AxvoidLearn 2.0.0. Source of truth for this part of the design system.
  Components must read only the --lrn-* tokens below. No component may contain a hex colour.

  Founder direction: black is charcoal, with its gradations. Every night surface is a step of the
  charcoal ramp in section 0 (neutral greys sampled from the founder's dark-mode screenshot, extended).
  Change one ramp step and every plate that uses it follows.

  Three switches, all on <html>:
    data-mode="auto | night | day"   auto follows the visitor's system setting (default)
    data-palette="axvoid | t2-sage | t2-amber | t2-teal"   which colour plate (default: axvoid)
    inline --lrn-* / --charcoal-*    a one-off override, used by the live editor in palette-preview.html

  To change colours later: edit the ramp (section 0) or a plate block (section 1), or change the
  default plate by changing one attribute. To add a plate: copy a block, rename it, change values.
  Keep every text pair at WCAG 4.5:1 or better (see README.md, "Guardrails").
*/

/* ---------- 0. CHARCOAL RAMP (night surfaces, text and muted): the only place these greys live ---------- */

:root {
  --charcoal-950: #101011;  /* page */
  --charcoal-900: #18181A;  /* panel, card */
  --charcoal-800: #242426;  /* soft divider */
  --charcoal-700: #303031;  /* border, selected, raised */
  --charcoal-600: #46464A;  /* hover on raised */
  --charcoal-500: #6B6B70;  /* subtle: icons, placeholders, disabled (not for text) */
  --charcoal-400: #BABBC0;  /* muted text (lifted for 4.5:1 on hover surfaces, alpha.17) */
  --charcoal-50:  #F8F9FA;  /* text */
}

/* ---------- 1. PALETTES: n- = night values, d- = day values ---------- */
/* Tokens per mode: bg panel raised hover line line-soft subtle text muted accent on-accent fail mark */

/* axvoid (default): charcoal + Signal teal at night, Lab notebook by day */
:root,
html[data-palette="axvoid"] {
  --n-bg: var(--charcoal-950);  --n-panel: var(--charcoal-900);  --n-raised: var(--charcoal-700);  --n-hover: var(--charcoal-600);
  --n-line: var(--charcoal-700);  --n-line-soft: var(--charcoal-800);  --n-subtle: var(--charcoal-500);
  --n-text: var(--charcoal-50);  --n-muted: var(--charcoal-400);
  --n-accent: #3EE0D0;  --n-on-accent: #06201D;  --n-fail: #F2BA72;  --n-mark: #342B21;

  --d-bg: #F1F5F3;  --d-panel: #FFFFFF;  --d-raised: #E6ECE9;  --d-hover: #DCE4E0;
  --d-line: #D0DAD5;  --d-line-soft: #E3EAE6;  --d-subtle: #8A9892;
  --d-text: #1F2123;  --d-muted: #4A5A55;
  --d-accent: #0B6B5F;  --d-on-accent: #FFFFFF;  --d-fail: #B53421;  --d-mark: #FFF0B8;
}

/* ---------- 2. MODE MAPPING: written once, never edited per palette ---------- */

html[data-mode="night"] {
  color-scheme: dark;
  --lrn-bg: var(--n-bg);  --lrn-panel: var(--n-panel);  --lrn-raised: var(--n-raised);  --lrn-hover: var(--n-hover);
  --lrn-line: var(--n-line);  --lrn-line-soft: var(--n-line-soft);  --lrn-subtle: var(--n-subtle);
  --lrn-text: var(--n-text);  --lrn-muted: var(--n-muted);
  --lrn-accent: var(--n-accent);  --lrn-on-accent: var(--n-on-accent);  --lrn-fail: var(--n-fail);  --lrn-mark: var(--n-mark);
}

html[data-mode="day"] {
  color-scheme: light;
  --lrn-bg: var(--d-bg);  --lrn-panel: var(--d-panel);  --lrn-raised: var(--d-raised);  --lrn-hover: var(--d-hover);
  --lrn-line: var(--d-line);  --lrn-line-soft: var(--d-line-soft);  --lrn-subtle: var(--d-subtle);
  --lrn-text: var(--d-text);  --lrn-muted: var(--d-muted);
  --lrn-accent: var(--d-accent);  --lrn-on-accent: var(--d-on-accent);  --lrn-fail: var(--d-fail);  --lrn-mark: var(--d-mark);
}

/* auto (also the fallback when data-mode is absent): follow the system setting; night if unknown */
html:not([data-mode="night"]):not([data-mode="day"]) {
  color-scheme: dark;
  --lrn-bg: var(--n-bg);  --lrn-panel: var(--n-panel);  --lrn-raised: var(--n-raised);  --lrn-hover: var(--n-hover);
  --lrn-line: var(--n-line);  --lrn-line-soft: var(--n-line-soft);  --lrn-subtle: var(--n-subtle);
  --lrn-text: var(--n-text);  --lrn-muted: var(--n-muted);
  --lrn-accent: var(--n-accent);  --lrn-on-accent: var(--n-on-accent);  --lrn-fail: var(--n-fail);  --lrn-mark: var(--n-mark);
}

@media (prefers-color-scheme: light) {
  html:not([data-mode="night"]):not([data-mode="day"]) {
    color-scheme: light;
    --lrn-bg: var(--d-bg);  --lrn-panel: var(--d-panel);  --lrn-raised: var(--d-raised);  --lrn-hover: var(--d-hover);
    --lrn-line: var(--d-line);  --lrn-line-soft: var(--d-line-soft);  --lrn-subtle: var(--d-subtle);
    --lrn-text: var(--d-text);  --lrn-muted: var(--d-muted);
    --lrn-accent: var(--d-accent);  --lrn-on-accent: var(--d-on-accent);  --lrn-fail: var(--d-fail);  --lrn-mark: var(--d-mark);
  }
}

/* ---------- 3. SHARED SEMANTICS (status is never colour alone) ---------- */
/* passed = filled accent square; failed = fail colour with a diagonal mark; not run = dashed outline */

/* Trial T2 sage / forest — trial plate (2026-10-31 founder test). Warm paper base, one accent per option. */
html[data-palette="t2-sage"] {
  --n-bg: #14130F;  --n-panel: #1C1B16;  --n-raised: #292821;  --n-hover: #35342B;
  --n-line: #3A3930;  --n-line-soft: #24231D;  --n-subtle: #6E6A5C;
  --n-text: #F7F4EA;  --n-muted: #C9C4B2;
  --n-accent: #8FD694;  --n-on-accent: #14130F;  --n-fail: #FF9A7E;  --n-mark: #3A2A1E;

  --d-bg: #F6F1E7;  --d-panel: #FFFDF8;  --d-raised: #EDE6D6;  --d-hover: #E4DCC8;
  --d-line: #D9CFBA;  --d-line-soft: #EAE3D3;  --d-subtle: #958B78;
  --d-text: #1E1B16;  --d-muted: #5A5346;
  --d-accent: #1F6B4A;  --d-on-accent: #FFFFFF;  --d-fail: #A3361F;  --d-mark: #F7E3C4;
}

/* Trial T2 amber / ochre — trial plate (2026-10-31 founder test). Warm paper base, one accent per option. */
html[data-palette="t2-amber"] {
  --n-bg: #14130F;  --n-panel: #1C1B16;  --n-raised: #292821;  --n-hover: #35342B;
  --n-line: #3A3930;  --n-line-soft: #24231D;  --n-subtle: #6E6A5C;
  --n-text: #F7F4EA;  --n-muted: #C9C4B2;
  --n-accent: #E8B86D;  --n-on-accent: #14130F;  --n-fail: #FF9A7E;  --n-mark: #3A2A1E;

  --d-bg: #F6F1E7;  --d-panel: #FFFDF8;  --d-raised: #EDE6D6;  --d-hover: #E4DCC8;
  --d-line: #D9CFBA;  --d-line-soft: #EAE3D3;  --d-subtle: #958B78;
  --d-text: #1E1B16;  --d-muted: #5A5346;
  --d-accent: #8A5A00;  --d-on-accent: #FFFFFF;  --d-fail: #A3361F;  --d-mark: #F7E3C4;
}

/* Trial T2 teal-mint / teal — trial plate (2026-10-31 founder test). Warm paper base, one accent per option. */
html[data-palette="t2-teal"] {
  --n-bg: #14130F;  --n-panel: #1C1B16;  --n-raised: #292821;  --n-hover: #35342B;
  --n-line: #3A3930;  --n-line-soft: #24231D;  --n-subtle: #6E6A5C;
  --n-text: #F7F4EA;  --n-muted: #C9C4B2;
  --n-accent: #7FD1C7;  --n-on-accent: #14130F;  --n-fail: #FF9A7E;  --n-mark: #3A2A1E;

  --d-bg: #F6F1E7;  --d-panel: #FFFDF8;  --d-raised: #EDE6D6;  --d-hover: #E4DCC8;
  --d-line: #D9CFBA;  --d-line-soft: #EAE3D3;  --d-subtle: #958B78;
  --d-text: #1E1B16;  --d-muted: #5A5346;
  --d-accent: #0F766E;  --d-on-accent: #FFFFFF;  --d-fail: #A3361F;  --d-mark: #F7E3C4;
}