/* Wrapped in @layer m3e — the layer order is declared as the first style in
   base.html: @layer properties, theme, base, m3e, components, utilities.
   This makes Tailwind utilities (@layer utilities) win over M3E component
   rules at equal specificity, which is the intended semantics. */
@layer m3e {
/* ═══════════════════════════════════════════════════════════════════
 * Descendant data-theme override
 *
 * m3e/tokens.css targets `:root[data-theme="dark"]` — which only works
 * when the attribute sits on <html>. For artboards / preview tiles that
 * want to flip a local subtree dark, this file adds the same rules but
 * scoped to any descendant element with data-theme="dark".
 *
 * Load this AFTER m3e/tokens.css (and after colors_and_type.css is fine
 * too — aliases reference tokens, so overriding the tokens here cascades).
 * Mirrors block 2a of tokens.css exactly (standard contrast, dark).
 * ═══════════════════════════════════════════════════════════════════ */

/* Re-declare aliases inside themed subtrees so children resolve them
   against the LOCAL overrides. CSS custom properties resolve at the
   element where they were defined — if --fg1 is defined only on :root,
   a descendant :root[data-theme] override of --md-sys-color-on-surface
   never reaches it. Redeclaring here fixes that. */
[data-theme="dark"], [data-theme="light"] {
  /* Light is the app default: every --md-sys-color-* is declared on :root
     in tokens.css and inherited intact. No forced-light override needed.
     Kept as an empty block so any stale copy is neutralized and so
     verify_descendant_dark.py's block probe still resolves. */
}

[data-theme="dark"] {
  --md-sys-color-primary: rgb(240 155 121);
  --md-sys-color-surface-tint: rgb(221 144 120);
  --md-sys-color-on-primary: rgb(46 13 5);
  --md-sys-color-primary-container: rgb(83 40 28);
  --md-sys-color-on-primary-container: rgb(255 217 203);
  --md-sys-color-secondary: rgb(196 182 172);
  --md-sys-color-on-secondary: rgb(42 31 27);
  --md-sys-color-secondary-container: rgb(58 43 38);
  --md-sys-color-on-secondary-container: rgb(239 229 221);
  --md-sys-color-tertiary: rgb(199 227 184);
  --md-sys-color-on-tertiary: rgb(16 32 12);
  --md-sys-color-tertiary-container: rgb(52 57 42);
  --md-sys-color-on-tertiary-container: rgb(199 227 184);
  --md-sys-color-error: rgb(255 210 204);
  --md-sys-color-on-error: rgb(84 0 3);
  --md-sys-color-error-container: rgb(255 84 73);
  --md-sys-color-on-error-container: rgb(0 0 0);
  --md-sys-color-background: rgb(32 22 20);
  --md-sys-color-on-background: rgb(244 237 230);
  --md-sys-color-surface: rgb(42 31 27);
  --md-sys-color-on-surface: rgb(244 237 230);
  --md-sys-color-surface-variant: rgb(58 43 38);
  --md-sys-color-on-surface-variant: rgb(196 182 172);
  --md-sys-color-outline: rgb(152 138 128);
  --md-sys-color-outline-variant: rgb(58 43 38);
  --md-sys-color-inverse-surface: rgb(244 237 230);
  --md-sys-color-inverse-on-surface: rgb(49 36 32);
  --md-sys-color-inverse-primary: rgb(138 42 14);
  --md-sys-color-primary-fixed: rgb(255 217 203);
  --md-sys-color-on-primary-fixed: rgb(36 13 4);
  --md-sys-color-primary-fixed-dim: rgb(221 144 120);
  --md-sys-color-on-primary-fixed-variant: rgb(36 13 4);
  --md-sys-color-secondary-fixed: rgb(239 229 221);
  --md-sys-color-on-secondary-fixed: rgb(34 24 20);
  --md-sys-color-secondary-fixed-dim: rgb(196 182 172);
  --md-sys-color-on-secondary-fixed-variant: rgb(34 24 20);
  --md-sys-color-tertiary-fixed: rgb(168 199 158);
  --md-sys-color-on-tertiary-fixed: rgb(14 37 8);
  --md-sys-color-tertiary-fixed-dim: rgb(139 174 128);
  --md-sys-color-on-tertiary-fixed-variant: rgb(11 33 8);
  --md-sys-color-surface-dim: rgb(32 22 20);
  --md-sys-color-surface-bright: rgb(78 66 58);
  --md-sys-color-surface-container-lowest: rgb(32 22 20);
  --md-sys-color-surface-container-low: rgb(42 31 27);
  --md-sys-color-surface-container: rgb(49 36 32);
  --md-sys-color-surface-container-high: rgb(58 43 38);
  --md-sys-color-surface-container-highest: rgb(69 52 47);

  /* Dark-mode warning trio + on-court ink — mirrors the dark-swap block in
     colors_and_type.css so themed subtrees agree with :root. The alias block
     above sets the light-mode warning; these override it for dark subtrees. */
  --on-court-gradient: var(--court-wall);
  --warning:              var(--warn);
  --warning-container:    var(--warn-container);
  --warning-on-container: var(--warn-on-container);

  /* Dark canvas pin — mirrors colors_and_type.css. */
  --page-canvas: var(--md-sys-color-surface-container-lowest);
}

[data-theme="light"] {
  /* Light is the app default: every --md-sys-color-* is declared on :root in tokens.css.
     No forced-light override needed. Empty block neutralizes stale copies and keeps
     verify_descendant_dark.py's block probe resolvable. */
}

}