/**
 * MADDev 3-color design system — base tokens (DESIGN.md is binding).
 *
 * Canonical source for the theme's css/colors.css. Derivation report:
 * color worker 2026-06-12 (logo-kit sepia extraction + export palette
 * cross-reference + WCAG verification). See ASSUMPTIONS.md A-005.
 *
 * Round 2 (F-006): paper #f0e29e (warm, +yellow), ink #271a0b (export
 * --bg-deep). Round 3 (Rudi, F-020, 2026-06-12): support = the ORIGINAL
 * TERRACOTTA #b25a25 (the export's --accent) — Rudi's sanctioned deviation
 * per DESIGN.md ("deviations are his call"); supersedes the earthy brown.
 * Ink-on-paper: 12.98:1 (AAA). Terracotta: 3.67:1 on paper / 3.54:1 on ink
 * — AA for LARGE text/accents ONLY; never body-size text (use ink).
 *
 * Dark + high-contrast (2026-06-28, MADDev dark/HC standard): the 3 base
 * colors flip per cell via prefers-color-scheme / prefers-contrast + a
 * [data-theme] manual layer. The alpha steps + rule are derived with var()
 * so they follow the base colors. Tier-2 --mad-band / --mad-on-band stay
 * FIXED for surfaces that are dark in EVERY mode (navbar, footer, editor
 * "dark" bands). Light·normal stays byte-identical.
 */
:root {

  /* ── 3 base colors ───────────────────────────────────────────── */
  --mad-ink:      #271a0b;   /* "black" — very dark brown: text, dark surfaces   */
  --mad-paper:    #f0e29e;   /* "white" — warm yellow-beige: backgrounds, light  */
  --mad-support:  #b25a25;   /* lighter brown: accent, secondary surfaces        */

  /* ── Border width — hairline; 2px in the high-contrast cells ──── */
  --mad-bw: 1px;

  /* ── Tier-2 FIXED band tokens — surfaces dark in EVERY cell ───── */
  --mad-band:     #271a0b;   /* navbar / footer / editor "dark" bands           */
  --mad-on-band:  #f0e29e;   /* cream text/icons on those dark bands            */
  --mad-on-band-70: color-mix(in srgb, var(--mad-on-band) 70%, transparent);
  --mad-on-band-40: color-mix(in srgb, var(--mad-on-band) 40%, transparent);
  --mad-on-band-20: color-mix(in srgb, var(--mad-on-band) 20%, transparent);

  /* ── Ink alpha steps (foreground / overlays on paper) ────────── */
  --mad-ink-90:   color-mix(in srgb, var(--mad-ink) 90%,  transparent);
  --mad-ink-70:   color-mix(in srgb, var(--mad-ink) 70%,  transparent);
  --mad-ink-40:   color-mix(in srgb, var(--mad-ink) 40%,  transparent);
  --mad-ink-20:   color-mix(in srgb, var(--mad-ink) 20%,  transparent);
  --mad-ink-10:   color-mix(in srgb, var(--mad-ink) 10%,  transparent);

  /* ── Paper alpha steps (soft fills, card surfaces) ───────────── */
  --mad-paper-90: color-mix(in srgb, var(--mad-paper) 90%, transparent);
  --mad-paper-70: color-mix(in srgb, var(--mad-paper) 70%, transparent);
  --mad-paper-40: color-mix(in srgb, var(--mad-paper) 40%, transparent);
  --mad-paper-20: color-mix(in srgb, var(--mad-paper) 20%, transparent);

  /* ── Support alpha steps ──────────────────────────────────────── */
  --mad-support-70: color-mix(in srgb, var(--mad-support) 70%, transparent);
  --mad-support-40: color-mix(in srgb, var(--mad-support) 40%, transparent);
  --mad-support-15: color-mix(in srgb, var(--mad-support) 15%, transparent);

  /* ── Rule / hairline tokens (ink at low opacity) ─────────────── */
  --mad-rule:     color-mix(in srgb, var(--mad-ink) 18%, transparent);
  --mad-rule-2:   color-mix(in srgb, var(--mad-ink)  9%, transparent);

  /* ── Shadow token (depth without a 4th hue; stays dark in dark) ─ */
  --mad-shadow-sm:  0 1px  3px color-mix(in srgb, #271a0b 18%, transparent),
                    0 1px  2px color-mix(in srgb, #271a0b 12%, transparent);
  --mad-shadow-md:  0 4px  8px color-mix(in srgb, #271a0b 14%, transparent),
                    0 2px  4px color-mix(in srgb, #271a0b 10%, transparent);
  --mad-shadow-lg:  0 8px 24px color-mix(in srgb, #271a0b 16%, transparent),
                    0 3px  8px color-mix(in srgb, #271a0b 10%, transparent);
}

/* ── Theme cells — OS-driven (prefers-color-scheme / prefers-contrast) ──────
   Only the 3 base colors (+ band/bw in HC) change; :root above is
   LIGHT·NORMAL and stays the default. Dark keeps the warm-sepia character. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --mad-ink:     #f2e7c4;   /* warm cream — becomes the text colour    */
    --mad-paper:   #1b1409;   /* deep espresso — becomes the background   */
    --mad-support: #d8824a;   /* brightened terracotta for dark surfaces  */
  }
}
@media (prefers-contrast: more) {
  :root {
    --mad-ink:     #1a1206;  --mad-paper: #fbf7ec;  --mad-support: #7a3510;
    --mad-band:    #1a1206;  --mad-on-band: #ffffff;  --mad-bw: 2px;
  }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    color-scheme: dark;
    --mad-ink:     #ffffff;  --mad-paper: #0c0905;  --mad-support: #ff9d57;
    --mad-band:    #000000;  --mad-on-band: #ffffff;  --mad-bw: 2px;
  }
}

/* ── Manual override — a toggle/keyboard shortcut sets data-theme on <html>.
   After the media queries so a manual choice wins. Keys (temp) via
   js/madd-theme-toggle.js: Alt+Shift+D/C/M/A. */
[data-theme="light"] {
  color-scheme: light;
  --mad-ink:#271a0b; --mad-paper:#f0e29e; --mad-support:#b25a25;
  --mad-band:#271a0b; --mad-on-band:#f0e29e; --mad-bw:1px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --mad-ink:#f2e7c4; --mad-paper:#1b1409; --mad-support:#d8824a;
}
[data-theme="light-hc"] {
  color-scheme: light;
  --mad-ink:#1a1206; --mad-paper:#fbf7ec; --mad-support:#7a3510;
  --mad-band:#1a1206; --mad-on-band:#ffffff; --mad-bw:2px;
}
[data-theme="dark-hc"] {
  color-scheme: dark;
  --mad-ink:#ffffff; --mad-paper:#0c0905; --mad-support:#ff9d57;
  --mad-band:#000000; --mad-on-band:#ffffff; --mad-bw:2px;
}