/* =====================================================================
   DFI Training Academy — THEME TOKENS  (single source of truth)
   ---------------------------------------------------------------------
   Light themes: CRIMSON (default) + Melon.  Dark themes (2026-09-14, Sandi):
   midnight, hazard, blueprint, ember, synthwave, emerald, cyberpunk, acid.
   Plus "auto" (follows the device: crimson / midnight) and "custom" (Make it
   your own: the head script in includes/v2/ui.php derives every token below
   from a chosen background + accent and sets them inline, keeping 4.5:1).
   Switch by setting data-theme on <html>; dark themes also get data-mode="dark".
   The account menu's Theme picker does this and saves the choice (device +
   account). Admin pages get every theme too (2026-09-14): the danger/warning/
   info/control-border tokens exist for them, and admin pages write
   var(--color-x, #classic) so the classic look is unchanged.
   With no data-theme at all, Crimson applies (it is the :root palette).
   Dark values generated + contrast-checked by scratchpad/dark_themes.php.

   RULE: colors are named ONLY in this file. Every component uses the
   role tokens below — var(--color-*) — never a hex code. To change a
   color, change it here and it changes everywhere.

   Contrast notes are WCAG 2.1 AA checks for the pairings actually used
   for text (4.5:1 needed for normal text, 3:1 for large/bold 18px+).
   The PHP build links this file from includes/header.php.
   Created 2026-09-12. Crimson made the default 2026-09-12 (Sandi).
   ===================================================================== */

:root,
[data-theme="crimson"] {
  /* ---- Surfaces ---- */
  --color-bg:             #F4F5F7;   /* page background */
  --color-surface:        #FFFFFF;   /* cards, panels, dropdowns, dialog */
  --color-surface-alt:    #F1F2F5;   /* icon wells, hover fill, progress track */
  --color-avatar:         #F3DADA;   /* initials circle */
  --color-border:         #D9DDE5;   /* card edges, dividers */

  /* ---- Text ---- */
  --color-heading:        #14161C;   /* headings, key labels        — 18:1 on white */
  --color-text:           #2D3340;   /* body copy                   — 12:1 on white */
  --color-text-muted:     #5C616D;   /* secondary copy, subtitles   — 6.2:1 on white */

  /* ---- Primary action (main buttons, brand mark) ---- */
  --color-primary:        #991B1B;   /* deep crimson */
  --color-primary-hover:  #7F1D1D;
  --color-on-primary:     #FFFFFF;   /* text on primary             — 8.3:1 */

  /* ---- Call-to-action / accent ---- */
  --color-cta:            #DC2626;   /* CTA fills, progress bar, active tab line */
  --color-cta-light:      #F87171;   /* progress gradient end */
  --color-cta-hover:      #B91C1C;
  --color-on-cta:         #FFFFFF;   /* text on CTA                 — 4.8:1 */
  --color-cta-text:       #991B1B;   /* accent-colored text on light — 8.3:1 on white, 6.9:1 on cta-soft */
  --color-cta-soft:       #F8E6E6;   /* tags, badges, feature-row fill */

  /* ---- Dark bands (field challenge, help strip) ---- */
  --color-band:           #0A0B10;
  --color-band-end:       #3B1116;   /* band gradient end */
  --color-on-band-muted:  #D6D9E0;   /* paragraph text on band */
  --color-on-band-accent: #F87171;   /* overline text on band       — 6.5:1 */
  --color-on-band:        #FFFFFF;   /* headings / controls on bands and the video player (dark themes keep this white
                                        even when their buttons use dark text) */

  /* ---- Status ---- */
  --color-success:        #117A3E;   /* "Complete", correct answer  — 5.4:1 on white (was #148C47 = 4.3:1, failed AA) */
  --color-on-success:     #FFFFFF;   /* text on a success fill      — 5.4:1 */
  --color-success-soft:   #DCF0E3;
  --color-live:           #22A55A;   /* "online" dot (decorative only) */
  --color-focus:          #991B1B;   /* keyboard focus ring */

  /* ---- Status (admin pages: errors, warnings, info notes) ---- */
  --color-danger:         #A12626;   /* error text / danger button  — 6.9:1 on white */
  --color-danger-soft:    #FBEAEA;
  --color-on-danger:      #FFFFFF;   /* text on a danger fill       — 6.9:1 */
  --color-warning:        #8A5A00;   /* 5.9:1 on white */
  --color-warning-soft:   #FEF3D7;
  --color-on-warning:     #FFFFFF;
  --color-info:           #26337A;   /* 10:1 on white */
  --color-info-soft:      #E8ECF8;
  --color-on-info:        #FFFFFF;
  --color-control-border: #8C929C;   /* form-field edges            — 3.2:1 on white (WCAG 1.4.11) */

  /* ---- Effects (RGB triplets so opacity can vary per use) ---- */
  --color-glow-rgb:       220, 38, 38;     /* hero glow, radar, card corner glow */
  --color-glow-2-rgb:     248, 113, 113;   /* secondary hero glow */
  --glow-strength:        .30;             /* red glows read strong — kept softer than melon */
  --color-shadow-rgb:     10, 11, 16;      /* all drop shadows + dialog backdrop */
}

[data-theme="melon"] {
  /* ---- Surfaces ---- */
  --color-bg:             #F6F9FA;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #EEF3F6;
  --color-avatar:         #D9E6ED;
  --color-border:         #DCE5E9;

  /* ---- Text ---- */
  --color-heading:        #0B2C42;   /* 14:1 on white */
  --color-text:           #17262F;   /* 15:1 on white */
  --color-text-muted:     #5B6B77;   /* 5.5:1 on white */

  /* ---- Primary action ---- */
  --color-primary:        #0B2C42;
  --color-primary-hover:  #164865;
  --color-on-primary:     #FFFFFF;   /* 14:1 */

  /* ---- Call-to-action / accent (melon) ---- */
  --color-cta:            #F29A74;
  --color-cta-light:      #FFD0BC;
  --color-cta-hover:      #FFB896;
  --color-on-cta:         #0B2C42;   /* 6.1:1 */
  --color-cta-text:       #A14C2E;   /* 5.8:1 on white, 4.9:1 on cta-soft */
  --color-cta-soft:       #FFE5D9;

  /* ---- Dark bands ---- */
  --color-band:           #0B2C42;
  --color-band-end:       #155679;
  --color-on-band-muted:  #C9DCE7;   /* 9:1 */
  --color-on-band-accent: #FFC3A8;   /* 9:1 */
  --color-on-band:        #FFFFFF;

  /* ---- Status ---- */
  --color-success:        #177549;   /* 5.7:1 on white, 4.8:1 on success-soft (was #1B8251 = 4.07:1 on soft, failed AA) */
  --color-on-success:     #FFFFFF;   /* 5.7:1 */
  --color-success-soft:   #D9F2E3;
  --color-live:           #29AD6A;
  --color-focus:          #1D6FA3;

  /* ---- Status (admin pages) ---- */
  --color-danger:         #A12626;   /* 6.9:1 on white */
  --color-danger-soft:    #FBEAEA;
  --color-on-danger:      #FFFFFF;
  --color-warning:        #8A5A00;   /* 5.9:1 */
  --color-warning-soft:   #FEF3D7;
  --color-on-warning:     #FFFFFF;
  --color-info:           #1D5B8C;   /* 6.9:1 */
  --color-info-soft:      #E3EEF6;
  --color-on-info:        #FFFFFF;
  --color-control-border: #7F8C95;   /* 3.4:1 on white */

  /* ---- Effects ---- */
  --color-glow-rgb:       242, 154, 116;
  --color-glow-2-rgb:     255, 196, 160;
  --glow-strength:        .58;
  --color-shadow-rgb:     11, 44, 66;
}

/* ---- Theme-independent: picker swatches always preview their own theme ---- */
:root {
  /* Secondary text for pages that also run in the CLASSIC look (admin pages): the classic
     styles.css already has its own --color-text-muted, so those pages write
     var(--color-subtle, <classic fallback>) and the classic look keeps its colours. */
  --color-subtle:         var(--color-text-muted);
  --swatch-crimson:       #991B1B;
  --swatch-crimson-ring:  #14161C;
  --swatch-melon:         #F29A74;
  --swatch-melon-ring:    #0B2C42;
}

/* =====================================================================
   DARK THEMES — every text pairing checked for WCAG 2.1 AA (4.5:1).
   ===================================================================== */
[data-theme="midnight"] {   /* Midnight crimson (dark) */
  color-scheme: dark;
  --color-bg:              #0E0F13;
  --color-surface:         #181A21;
  --color-surface-alt:     #21242D;
  --color-avatar:          #3A1D22;
  --color-border:          #2E323D;
  --color-heading:         #F4F4F5;
  --color-text:            #D9DBE1;
  --color-text-muted:      #A5AAB4;
  --color-primary:         #DC2626;
  --color-primary-hover:   #B91C1C;
  --color-on-primary:      #FFFFFF;
  --color-cta:             #EF4444;
  --color-cta-light:       #FCA5A5;
  --color-cta-hover:       #F87171;
  --color-on-cta:          #140608;
  --color-cta-text:        #F87171;
  --color-cta-soft:        #34181C;
  --color-band:            #050608;
  --color-band-end:        #3B1116;
  --color-on-band:         #FFFFFF;
  --color-on-band-muted:   #D6D9E0;
  --color-on-band-accent:  #F87171;
  --color-success:         #4ADE80;
  --color-success-soft:    #0F2A1A;
  --color-on-success:      #052E16;
  --color-live:            #22C55E;
  --color-focus:           #F87171;
  --color-danger:          #F87171;
  --color-danger-soft:     #3A1519;
  --color-on-danger:       #1A0505;
  --color-warning:         #FBBF24;
  --color-warning-soft:    #2E2408;
  --color-on-warning:      #1F1400;
  --color-info:            #93C5FD;
  --color-info-soft:       #10223F;
  --color-on-info:         #0A1628;
  --color-control-border:  #7C8594;
  --color-glow-rgb:       220, 38, 38;
  --color-glow-2-rgb:     248, 113, 113;
  --glow-strength:        .35;
  --color-shadow-rgb:     0, 0, 0;
}

[data-theme="hazard"] {   /* Hazard stripe (dark) */
  color-scheme: dark;
  --color-bg:              #0A0A0A;
  --color-surface:         #161616;
  --color-surface-alt:     #202020;
  --color-avatar:          #3A3210;
  --color-border:          #2E2E2E;
  --color-heading:         #FAFAFA;
  --color-text:            #E5E5E5;
  --color-text-muted:      #A8A8A8;
  --color-primary:         #FACC15;
  --color-primary-hover:   #FDE047;
  --color-on-primary:      #111111;
  --color-cta:             #FACC15;
  --color-cta-light:       #FEF08A;
  --color-cta-hover:       #FDE047;
  --color-on-cta:          #111111;
  --color-cta-text:        #FACC15;
  --color-cta-soft:        #2A2408;
  --color-band:            #141203;
  --color-band-end:        #3A2F05;
  --color-on-band:         #FFFFFF;
  --color-on-band-muted:   #E5E5E5;
  --color-on-band-accent:  #FACC15;
  --color-success:         #4ADE80;
  --color-success-soft:    #0F2A1A;
  --color-on-success:      #052E16;
  --color-live:            #22C55E;
  --color-focus:           #FACC15;
  --color-danger:          #F87171;
  --color-danger-soft:     #3A1519;
  --color-on-danger:       #1A0505;
  --color-warning:         #FB923C;
  --color-warning-soft:    #2E2408;
  --color-on-warning:      #1F1400;
  --color-info:            #93C5FD;
  --color-info-soft:       #10223F;
  --color-on-info:         #0A1628;
  --color-control-border:  #7C8594;
  --color-glow-rgb:       250, 204, 21;
  --color-glow-2-rgb:     253, 224, 71;
  --glow-strength:        .28;
  --color-shadow-rgb:     0, 0, 0;
}

[data-theme="blueprint"] {   /* Neon blueprint (dark) */
  color-scheme: dark;
  --color-bg:              #06101F;
  --color-surface:         #0D1B30;
  --color-surface-alt:     #13243D;
  --color-avatar:          #123A4A;
  --color-border:          #1E3350;
  --color-heading:         #E6F1FF;
  --color-text:            #C9D8EC;
  --color-text-muted:      #8FA8C8;
  --color-primary:         #22D3EE;
  --color-primary-hover:   #67E8F9;
  --color-on-primary:      #04121F;
  --color-cta:             #22D3EE;
  --color-cta-light:       #A5F3FC;
  --color-cta-hover:       #67E8F9;
  --color-on-cta:          #04121F;
  --color-cta-text:        #22D3EE;
  --color-cta-soft:        #0B2A3A;
  --color-band:            #030A14;
  --color-band-end:        #0B2E4A;
  --color-on-band:         #FFFFFF;
  --color-on-band-muted:   #C9D8EC;
  --color-on-band-accent:  #67E8F9;
  --color-success:         #34D399;
  --color-success-soft:    #0B2A22;
  --color-on-success:      #03140D;
  --color-live:            #34D399;
  --color-focus:           #67E8F9;
  --color-danger:          #F87171;
  --color-danger-soft:     #3A1519;
  --color-on-danger:       #1A0505;
  --color-warning:         #FBBF24;
  --color-warning-soft:    #2E2408;
  --color-on-warning:      #1F1400;
  --color-info:            #93C5FD;
  --color-info-soft:       #10223F;
  --color-on-info:         #0A1628;
  --color-control-border:  #7C8594;
  --color-glow-rgb:       34, 211, 238;
  --color-glow-2-rgb:     103, 232, 249;
  --glow-strength:        .30;
  --color-shadow-rgb:     0, 0, 0;
}

[data-theme="ember"] {   /* Ember (dark) */
  color-scheme: dark;
  --color-bg:              #120D0B;
  --color-surface:         #1E1613;
  --color-surface-alt:     #281E1A;
  --color-avatar:          #3F2616;
  --color-border:          #3A2A22;
  --color-heading:         #FFF4EC;
  --color-text:            #F0DDD0;
  --color-text-muted:      #C4A898;
  --color-primary:         #FF7A1A;
  --color-primary-hover:   #FF9A4D;
  --color-on-primary:      #1A0D05;
  --color-cta:             #FF8A3D;
  --color-cta-light:       #FFC39A;
  --color-cta-hover:       #FFA366;
  --color-on-cta:          #1A0D05;
  --color-cta-text:        #FF9A5A;
  --color-cta-soft:        #3A2014;
  --color-band:            #0A0605;
  --color-band-end:        #4A1D08;
  --color-on-band:         #FFFFFF;
  --color-on-band-muted:   #F0DDD0;
  --color-on-band-accent:  #FFB078;
  --color-success:         #4ADE80;
  --color-success-soft:    #102A18;
  --color-on-success:      #052E16;
  --color-live:            #22C55E;
  --color-focus:           #FF9A4D;
  --color-danger:          #F87171;
  --color-danger-soft:     #3A1519;
  --color-on-danger:       #1A0505;
  --color-warning:         #FBBF24;
  --color-warning-soft:    #2E2408;
  --color-on-warning:      #1F1400;
  --color-info:            #93C5FD;
  --color-info-soft:       #10223F;
  --color-on-info:         #0A1628;
  --color-control-border:  #7C8594;
  --color-glow-rgb:       255, 122, 26;
  --color-glow-2-rgb:     255, 176, 120;
  --glow-strength:        .35;
  --color-shadow-rgb:     0, 0, 0;
}

[data-theme="synthwave"] {   /* Synthwave (dark) */
  color-scheme: dark;
  --color-bg:              #160B2A;
  --color-surface:         #22123D;
  --color-surface-alt:     #2C1850;
  --color-avatar:          #4A1F5E;
  --color-border:          #3B2466;
  --color-heading:         #F5EEFF;
  --color-text:            #E4D8FA;
  --color-text-muted:      #B9A9DB;
  --color-primary:         #FF4FD8;
  --color-primary-hover:   #FF7AE2;
  --color-on-primary:      #1A0526;
  --color-cta:             #2BD2FF;
  --color-cta-light:       #9BE9FF;
  --color-cta-hover:       #6FE0FF;
  --color-on-cta:          #06121A;
  --color-cta-text:        #FF7AE2;
  --color-cta-soft:        #3A1450;
  --color-band:            #0D0619;
  --color-band-end:        #4A1466;
  --color-on-band:         #FFFFFF;
  --color-on-band-muted:   #E4D8FA;
  --color-on-band-accent:  #2BD2FF;
  --color-success:         #4ADE80;
  --color-success-soft:    #123024;
  --color-on-success:      #052E16;
  --color-live:            #4ADE80;
  --color-focus:           #2BD2FF;
  --color-danger:          #F87171;
  --color-danger-soft:     #3A1519;
  --color-on-danger:       #1A0505;
  --color-warning:         #FBBF24;
  --color-warning-soft:    #2E2408;
  --color-on-warning:      #1F1400;
  --color-info:            #93C5FD;
  --color-info-soft:       #10223F;
  --color-on-info:         #0A1628;
  --color-control-border:  #7C8594;
  --color-glow-rgb:       255, 79, 216;
  --color-glow-2-rgb:     43, 210, 255;
  --glow-strength:        .35;
  --color-shadow-rgb:     0, 0, 0;
}

[data-theme="emerald"] {   /* Emerald night (dark) */
  color-scheme: dark;
  --color-bg:              #06140F;
  --color-surface:         #0C2119;
  --color-surface-alt:     #122B21;
  --color-avatar:          #16402F;
  --color-border:          #1B3A2E;
  --color-heading:         #EAFBF3;
  --color-text:            #CDEBDD;
  --color-text-muted:      #94BFAE;
  --color-primary:         #34D399;
  --color-primary-hover:   #6EE7B7;
  --color-on-primary:      #03140D;
  --color-cta:             #34D399;
  --color-cta-light:       #A7F3D0;
  --color-cta-hover:       #6EE7B7;
  --color-on-cta:          #03140D;
  --color-cta-text:        #34D399;
  --color-cta-soft:        #0F3326;
  --color-band:            #030C08;
  --color-band-end:        #0E3B2A;
  --color-on-band:         #FFFFFF;
  --color-on-band-muted:   #CDEBDD;
  --color-on-band-accent:  #6EE7B7;
  --color-success:         #6EE7B7;
  --color-success-soft:    #0F3326;
  --color-on-success:      #03140D;
  --color-live:            #34D399;
  --color-focus:           #6EE7B7;
  --color-danger:          #F87171;
  --color-danger-soft:     #3A1519;
  --color-on-danger:       #1A0505;
  --color-warning:         #FBBF24;
  --color-warning-soft:    #2E2408;
  --color-on-warning:      #1F1400;
  --color-info:            #93C5FD;
  --color-info-soft:       #10223F;
  --color-on-info:         #0A1628;
  --color-control-border:  #7C8594;
  --color-glow-rgb:       52, 211, 153;
  --color-glow-2-rgb:     110, 231, 183;
  --glow-strength:        .30;
  --color-shadow-rgb:     0, 0, 0;
}

[data-theme="cyberpunk"] {   /* Cyberpunk neon city (dark) */
  color-scheme: dark;
  --color-bg:              #091833;
  --color-surface:         #070F34;
  --color-surface-alt:     #0E1B4A;
  --color-avatar:          #3A0F5E;
  --color-border:          #1B2C5C;
  --color-heading:         #F2F7FF;
  --color-text:            #D8E3FF;
  --color-text-muted:      #9FB3D9;
  --color-primary:         #0ABDC6;
  --color-primary-hover:   #3FD6DD;
  --color-on-primary:      #050B24;
  --color-cta:             #EA00D9;
  --color-cta-light:       #FF6BF0;
  --color-cta-hover:       #FF2EE8;
  --color-on-cta:          #050B24;
  --color-cta-text:        #FF4FE6;
  --color-cta-soft:        #2A0B4A;
  --color-band:            #2A0660;
  --color-band-end:        #9201CB;
  --color-on-band:         #FFFFFF;
  --color-on-band-muted:   #EAD9FF;
  --color-on-band-accent:  #7FF6FC;
  --color-success:         #2EE6A6;
  --color-success-soft:    #06302A;
  --color-on-success:      #03140D;
  --color-live:            #2EE6A6;
  --color-focus:           #0ABDC6;
  --color-danger:          #F87171;
  --color-danger-soft:     #3A1519;
  --color-on-danger:       #1A0505;
  --color-warning:         #FBBF24;
  --color-warning-soft:    #2E2408;
  --color-on-warning:      #1F1400;
  --color-info:            #93C5FD;
  --color-info-soft:       #10223F;
  --color-on-info:         #0A1628;
  --color-control-border:  #7C8594;
  --color-glow-rgb:       234, 0, 217;
  --color-glow-2-rgb:     10, 189, 198;
  --glow-strength:        .40;
  --color-shadow-rgb:     0, 0, 0;
}

[data-theme="acid"] {   /* Acid brutalism (dark) */
  color-scheme: dark;
  --color-bg:              #0C0F14;
  --color-surface:         #252A34;
  --color-surface-alt:     #2E3440;
  --color-avatar:          #1F3A14;
  --color-border:          #3A4150;
  --color-heading:         #FFFFFF;
  --color-text:            #E6EAF0;
  --color-text-muted:      #B4BCCA;
  --color-primary:         #39FF14;
  --color-primary-hover:   #7CFF5E;
  --color-on-primary:      #0C0F14;
  --color-cta:             #00C2FF;
  --color-cta-light:       #7FE0FF;
  --color-cta-hover:       #4DD6FF;
  --color-on-cta:          #0C0F14;
  --color-cta-text:        #39FF14;
  --color-cta-soft:        #1B3212;
  --color-band:            #0A1206;
  --color-band-end:        #1F3A0E;
  --color-on-band:         #FFFFFF;
  --color-on-band-muted:   #E6EAF0;
  --color-on-band-accent:  #39FF14;
  --color-success:         #39FF14;
  --color-success-soft:    #1B3212;
  --color-on-success:      #0C0F14;
  --color-live:            #39FF14;
  --color-focus:           #00C2FF;
  --color-danger:          #F87171;
  --color-danger-soft:     #3A1519;
  --color-on-danger:       #1A0505;
  --color-warning:         #FBBF24;
  --color-warning-soft:    #2E2408;
  --color-on-warning:      #1F1400;
  --color-info:            #93C5FD;
  --color-info-soft:       #10223F;
  --color-on-info:         #0A1628;
  --color-control-border:  #8C95A5;
  --color-glow-rgb:       57, 255, 20;
  --color-glow-2-rgb:     0, 194, 255;
  --glow-strength:        .25;
  --color-shadow-rgb:     0, 0, 0;
}