/**
 * Edventures Design System
 * GENERATED FILE — do NOT edit by hand.
 * Source of truth: tokens/src/*.json   ·   Rebuild: npm run tokens
 * Tiers: primitive → semantic → component. See docs/tokens.md.
 */

[data-theme="dark"] {
  --bg-dark: #0E0918; /** Dark page background — deep violet-black. */
  --surface-dark: #1A1230; /** Dark card / nav surface, lifted above bg. */
  --surface-2-dark: #241838; /** Elevated dark surface — popovers, hover, disabled fill. */
  --text-dark: #F4F1FA; /** Primary text on dark. */
  --text-muted-dark: #B8B0CC; /** Secondary text on dark. */
  --text-subtle-dark: #857C9E; /** Muted / placeholder text on dark. */
  --text-disabled-dark: #6B6385; /** Disabled text on dark. */
  --border-dark: #4A3D66; /** Signature 2px border on dark — visible light-violet line replacing ink. */
  --divider-dark: #2A2140; /** Hairline divider on dark. */
  --violet-bright: #B794FF; /** Lightened violet — AA-legible links / icons / violet TEXT on dark. The base #7100FF stays for fills. */
  --violet-faint-dark: #1C1338; /** Faint violet wash on dark (was --color-primary-faint). */
  --shadow-dark: #000000; /** Hard offset shadow colour on dark surfaces (replaces ink). */
  --color-primary: var(--violet-500); /** Primary actions, brand surfaces — locked. */
  --color-primary-hover: var(--violet-700); /** Primary hover / pressed. */
  --color-primary-subtle: var(--violet-900); /** Soft violet fill on dark. */
  --color-primary-faint: var(--violet-faint-dark); /** Faint violet background on dark. */
  --color-primary-strong: var(--violet-900); /** Deepest violet for high-contrast text on tints. */
  --color-link: var(--violet-bright); /** Inline links / violet text / interactive icons on dark. */
  --color-on-primary-muted: var(--violet-on-muted); /** Muted text on violet surfaces. */
  --color-accent: var(--lime); /** The one highlight moment per screen. */
  --color-accent-soft: var(--lime-soft); /** Gentle lime fill / gradient end. */
  --color-punctuation: var(--pink); /** Pink emphasis — tags, punctuation. */
  --color-punctuation-soft: var(--pink-soft); /** Soft pink fill. */
  --color-text: var(--text-dark); /** Default body / heading text on dark. */
  --color-text-muted: var(--text-muted-dark); /** Secondary text on dark. */
  --color-text-subtle: var(--text-subtle-dark); /** Muted / placeholder text on dark. */
  --color-on-primary: var(--white); /** Text on violet. AA ✓. */
  --color-on-accent: var(--ink); /** Text on lime. AA ✓. */
  --color-on-punctuation: var(--ink); /** Text on pink. AA ✓. */
  --color-on-punctuation-soft: var(--pink-deep); /** Text on pink-soft. AA ✓. */
  --color-bg: var(--bg-dark); /** Page background. */
  --color-surface: var(--surface-dark); /** Card / input / nav surface. */
  --color-border: var(--border-dark); /** Signature border colour on dark. */
  --color-divider: var(--divider-dark); /** Hairline dividers on dark. */
  --color-focus: var(--violet-500); /** Focus ring colour. */
  --color-disabled-bg: var(--surface-2-dark); /** Disabled background on dark. */
  --color-disabled-text: var(--text-disabled-dark); /** Disabled text on dark. */
  --color-disabled-border: var(--divider-dark); /** Disabled border on dark. */
  --color-success: var(--green);
  --color-warning: var(--amber);
  --color-error: var(--red);
  --success: var(--green); /** Status — success. */
  --warning: var(--amber); /** Status — warning. */
  --error: var(--red); /** Status — error. */
  --border: var(--bw-default) solid var(--border-dark); /** Signature border shorthand on dark: 2px solid light-violet. */
  --shadow: 4px 4px 0 var(--shadow-dark); /** Default hard offset shadow on dark. */
  --shadow-sm: 3px 3px 0 var(--shadow-dark); /** Small hard shadow on dark. */
  --shadow-lg: 5px 5px 0 var(--shadow-dark); /** Large hard shadow on dark. */
  --shadow-lime: 4px 4px 0 var(--lime); /** Lime-tinted hard shadow. */
  --shadow-violet: 4px 4px 0 var(--violet-500); /** Violet-tinted hard shadow / input focus. */
  --shadow-pink: 4px 4px 0 var(--pink); /** Pink-tinted hard shadow. */
  --button-shadow-hover: 6px 6px 0 var(--shadow-dark); /** Hover lift on dark — true black. */
  --button-shadow-active: 1px 1px 0 var(--shadow-dark); /** Press on dark — true black. */
  --badge-border: var(--bw-hairline) solid var(--border-dark); /** 1.5px light-violet border on dark. */
}