/*
 * Chepe Teal Breeze — Design Token System (Section 6.2)
 *
 * THEME NAME: "Chepe Teal Breeze"
 *
 * PALETTE (6 colours — NEVER use raw hex anywhere else in the codebase):
 *   --ctb-eerie-black            #161615   background / primary text in Light Mode
 *   --ctb-baby-powder            #FFFFFD   background / primary text in Dark Mode
 *   --ctb-jungle-green           #00A682   primary action; success accent (Dark Mode)
 *   --ctb-selective-yellow       #FFBB00   primary CTA (Light Mode); highlights/badges
 *   --ctb-tropical-rain-forest   #00745B   cards / dividers; success accent (Light Mode)
 *   --ctb-bu-red                 #CA0A0A   error / failure in BOTH modes
 *
 * TWO MODES:
 *   Dark Mode  (default / fallback)  — Baby Powder bg, "fresh notebook" feel
 *   Light Mode (eye-care dark)       — Eerie Black bg, late-night study sessions
 *
 * MODE SELECTION LOGIC (managed by chepe-theme.js):
 *   1. Respect user's saved preference in localStorage('chepe-theme')
 *   2. If none, respect system prefers-color-scheme: dark → Light Mode
 *   3. Fallback: Dark Mode
 *
 * HOW TO USE:
 *   Consume --ctb-color-* tokens in CSS.
 *   Never read the raw palette tokens directly in rule sets — only in the
 *   "Default (Dark Mode)" / "[data-theme=light]" blocks below.
 *   The M3 compat layer at the end maps --md-sys-color-* to CTB tokens so
 *   all existing templates continue to work without template edits.
 */

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 1 — BASE PALETTE  (invariant; never changes with mode)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* The six Chepe Teal Breeze colours */
  --ctb-eerie-black:            #161615;
  --ctb-baby-powder:            #FFFFFD;
  --ctb-jungle-green:           #00A682;
  --ctb-selective-yellow:       #FFBB00;
  --ctb-tropical-rain-forest:   #00745B;
  --ctb-bu-red:                 #CA0A0A;

  /* ── Shape tokens (unchanged across modes) ───────────────────────────── */
  --md-sys-shape-corner-none:         0px;
  --md-sys-shape-corner-extra-small:  4px;
  --md-sys-shape-corner-small:        8px;
  --md-sys-shape-corner-medium:       12px;
  --md-sys-shape-corner-large:        16px;
  --md-sys-shape-corner-extra-large:  24px;
  --md-sys-shape-corner-full:         9999px;

  /* ── Elevation / shadow tokens (adjusted per mode below) ─────────────── */
  --chepe-elevation-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --chepe-elevation-2: 0 3px 6px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.12);
  --chepe-elevation-3: 0 10px 20px rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.10);

  /* ── Spacing tokens ──────────────────────────────────────── */
  --chepe-space-xs:  4px;
  --chepe-space-sm:  8px;
  --chepe-space-md:  16px;
  --chepe-space-lg:  24px;
  --chepe-space-xl:  32px;
  --chepe-space-2xl: 48px;
  --chepe-space-3xl: 64px;

  /* ── Navigation width tokens ─────────────────────────────────────────── */
  --chepe-nav-width:          80px;
  --chepe-nav-expanded-width: 256px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 2 — DARK MODE  (DEFAULT — Baby Powder bg, "fresh notebook")
   Applied when data-theme="dark" or as the base fallback.
   ══════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --ctb-color-background:        var(--ctb-baby-powder);     /* #FFFFFD page bg */
  --ctb-color-surface:           #FFFFFF;                    /* card / panel bg */
  --ctb-color-surface-variant:   #F5F5F3;                    /* subtle variant */
  --ctb-color-surface-container: rgba(0, 116, 91, 0.08);    /* tinted container */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --ctb-color-text:              var(--ctb-eerie-black);     /* #161615 */
  --ctb-color-text-secondary:    rgba(22, 22, 21, 0.65);
  --ctb-color-text-disabled:     rgba(22, 22, 21, 0.38);

  /* ── Primary action (CTAs, links) ─────────────────────────────────────── */
  --ctb-color-primary:           var(--ctb-jungle-green);    /* #00A682 */
  --ctb-color-on-primary:        var(--ctb-baby-powder);     /* #FFFFFD */
  --ctb-color-primary-container: rgba(0, 166, 130, 0.12);
  --ctb-color-on-primary-container: var(--ctb-tropical-rain-forest);

  /* ── Secondary (highlight / badges / progress) ────────────────────────── */
  --ctb-color-secondary:         var(--ctb-selective-yellow);/* #FFBB00 */
  --ctb-color-on-secondary:      var(--ctb-eerie-black);
  --ctb-color-secondary-container: rgba(255, 187, 0, 0.12);
  --ctb-color-on-secondary-container: var(--ctb-tropical-rain-forest);

  /* ── Tertiary (sub-headings, icons, dividers) ─────────────────────────── */
  --ctb-color-tertiary:          var(--ctb-tropical-rain-forest);  /* #00745B */
  --ctb-color-on-tertiary:       var(--ctb-baby-powder);
  --ctb-color-tertiary-container: rgba(0, 116, 91, 0.12);
  --ctb-color-on-tertiary-container: var(--ctb-tropical-rain-forest);

  /* ── Error / failure ─────────────────────────────────────────────────── */
  --ctb-color-error:             var(--ctb-bu-red);          /* #CA0A0A */
  --ctb-color-on-error:          var(--ctb-baby-powder);
  --ctb-color-error-container:   rgba(202, 10, 10, 0.08);
  --ctb-color-on-error-container: var(--ctb-bu-red);

  /* ── Success (Jungle Green in Dark Mode) ──────────────────────────────── */
  --ctb-color-success:           var(--ctb-jungle-green);
  --ctb-color-success-container: rgba(0, 166, 130, 0.10);
  --ctb-color-on-success-container: var(--ctb-tropical-rain-forest);

  /* ── Warning ─────────────────────────────────────────────────────────── */
  --ctb-color-warning:           var(--ctb-selective-yellow);
  --ctb-color-warning-container: rgba(255, 187, 0, 0.12);
  --ctb-color-on-warning-container: var(--ctb-tropical-rain-forest);

  /* ── Borders / outlines ──────────────────────────────────────────────── */
  --ctb-color-outline:           rgba(22, 22, 21, 0.20);
  --ctb-color-outline-variant:   rgba(22, 22, 21, 0.10);
  --ctb-color-divider:           rgba(0, 116, 91, 0.25);

  /* ── Navigation ──────────────────────────────────────────────────────── */
  --ctb-color-nav-bg:            #FFFFFF;
  --ctb-color-nav-active-bg:     rgba(0, 116, 91, 0.12);
  --ctb-color-nav-active-text:   var(--ctb-tropical-rain-forest);
  --ctb-color-nav-hover-bg:      rgba(0, 166, 130, 0.08);

  /* ── UI Chips / count badges ─────────────────────────────────────────── */
  --ctb-color-chip-bg:           rgba(0, 116, 91, 0.10);
  --ctb-color-chip-text:         var(--ctb-tropical-rain-forest);

  /* ── Neutral / secondary buttons ─────────────────────────────────────── */
  --ctb-color-btn-neutral-bg:    #F5F5F3;
  --ctb-color-btn-neutral-text:  rgba(22, 22, 21, 0.70);

  /* ── Danger / delete buttons ─────────────────────────────────────────── */
  --ctb-color-btn-danger-bg:     rgba(202, 10, 10, 0.08);
  --ctb-color-btn-danger-text:   var(--ctb-bu-red);
  --ctb-color-btn-danger-border: rgba(202, 10, 10, 0.25);

  /* ── Warning banner ──────────────────────────────────────────────────── */
  --ctb-color-banner-warn-bg:     rgba(255, 187, 0, 0.10);
  --ctb-color-banner-warn-border: var(--ctb-selective-yellow);
  --ctb-color-banner-cta-bg:      var(--ctb-selective-yellow);
  --ctb-color-banner-cta-text:    var(--ctb-eerie-black);

  /* ── Empty states ────────────────────────────────────────────────────── */
  --ctb-color-empty-bg:          #FFFFFF;
  --ctb-color-empty-border:      rgba(22, 22, 21, 0.15);

  /* ── Quote / message blocks ──────────────────────────────────────────── */
  --ctb-color-quote-bg:          #F5F5F3;
  --ctb-color-quote-text:        rgba(22, 22, 21, 0.65);

  /* ── Grade colours (on light bg — use deeper, readable shades) ────────── */
  --ctb-color-grade-a:           var(--ctb-tropical-rain-forest);   /* #00745B */
  --ctb-color-grade-b:           var(--ctb-jungle-green);           /* #00A682 */
  --ctb-color-grade-c:           #B08000;                           /* dark gold */
  --ctb-color-grade-d:           #B06000;                           /* dark orange */
  --ctb-color-grade-e:           var(--ctb-bu-red);                 /* #CA0A0A */
  --ctb-color-grade-a-bg:        rgba(0, 116, 91, 0.10);
  --ctb-color-grade-b-bg:        rgba(0, 166, 130, 0.10);
  --ctb-color-grade-c-bg:        rgba(255, 187, 0, 0.10);
  --ctb-color-grade-d-bg:        rgba(176, 96, 0, 0.10);
  --ctb-color-grade-e-bg:        rgba(202, 10, 10, 0.08);

  /* ── Rank / podium colours ────────────────────────────────────────────── */
  --ctb-color-rank-gold:         var(--ctb-selective-yellow);       /* #FFBB00 */
  --ctb-color-rank-gold-text:    var(--ctb-eerie-black);
  --ctb-color-rank-silver:       #9E9E9E;
  --ctb-color-rank-silver-text:  #3D3D3D;
  --ctb-color-rank-bronze:       var(--ctb-tropical-rain-forest);   /* #00745B */
  --ctb-color-rank-bronze-text:  var(--ctb-baby-powder);

  /* ── Auth page gradient seed ─────────────────────────────────────────── */
  --ctb-auth-gradient-from:      rgba(0, 116, 91, 0.12);

  /* ── Focus ring ──────────────────────────────────────────────────────── */
  --ctb-focus-ring:              rgba(0, 166, 130, 0.25);

  /* ── Elevation (light bg needs standard shadows) ─────────────────────── */
  --chepe-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --chepe-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  --chepe-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 3 — LIGHT MODE  (Eerie Black bg, "late-night study")
   Applied when data-theme="light".
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --ctb-color-background:        var(--ctb-eerie-black);     /* #161615 page bg */
  --ctb-color-surface:           #1E1E1C;                    /* card / panel bg */
  --ctb-color-surface-variant:   #252523;                    /* subtle variant */
  --ctb-color-surface-container: rgba(0, 116, 91, 0.18);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --ctb-color-text:              var(--ctb-baby-powder);     /* #FFFFFD */
  --ctb-color-text-secondary:    rgba(255, 255, 253, 0.68);
  --ctb-color-text-disabled:     rgba(255, 255, 253, 0.38);

  /* ── Primary action (links/secondary CTAs) ────────────────────────────── */
  --ctb-color-primary:           var(--ctb-jungle-green);    /* #00A682 */
  --ctb-color-on-primary:        var(--ctb-baby-powder);
  --ctb-color-primary-container: rgba(0, 166, 130, 0.20);
  --ctb-color-on-primary-container: var(--ctb-selective-yellow);

  /* ── Secondary (Selective Yellow = primary CTA in Light Mode) ────────── */
  --ctb-color-secondary:         var(--ctb-selective-yellow);/* #FFBB00 */
  --ctb-color-on-secondary:      var(--ctb-eerie-black);
  --ctb-color-secondary-container: rgba(255, 187, 0, 0.18);
  --ctb-color-on-secondary-container: var(--ctb-selective-yellow);

  /* ── Tertiary ────────────────────────────────────────────────────────── */
  --ctb-color-tertiary:          var(--ctb-selective-yellow);/* accent */
  --ctb-color-on-tertiary:       var(--ctb-eerie-black);
  --ctb-color-tertiary-container: rgba(255, 187, 0, 0.15);
  --ctb-color-on-tertiary-container: var(--ctb-selective-yellow);

  /* ── Error / failure ─────────────────────────────────────────────────── */
  --ctb-color-error:             var(--ctb-bu-red);          /* #CA0A0A */
  --ctb-color-on-error:          var(--ctb-baby-powder);
  --ctb-color-error-container:   rgba(202, 10, 10, 0.15);
  --ctb-color-on-error-container: #FF6B6B;                   /* lighter for dark bg */

  /* ── Success (Tropical Rain Forest in Light Mode) ────────────────────── */
  --ctb-color-success:           var(--ctb-tropical-rain-forest);   /* #00745B */
  --ctb-color-success-container: rgba(0, 116, 91, 0.18);
  --ctb-color-on-success-container: var(--ctb-jungle-green);        /* #00A682 */

  /* ── Warning ─────────────────────────────────────────────────────────── */
  --ctb-color-warning:           var(--ctb-selective-yellow);
  --ctb-color-warning-container: rgba(255, 187, 0, 0.15);
  --ctb-color-on-warning-container: var(--ctb-selective-yellow);

  /* ── Borders / outlines ──────────────────────────────────────────────── */
  --ctb-color-outline:           rgba(255, 255, 253, 0.20);
  --ctb-color-outline-variant:   rgba(255, 255, 253, 0.10);
  --ctb-color-divider:           rgba(0, 116, 91, 0.30);

  /* ── Navigation ──────────────────────────────────────────────────────── */
  --ctb-color-nav-bg:            #1E1E1C;
  --ctb-color-nav-active-bg:     rgba(255, 187, 0, 0.15);
  --ctb-color-nav-active-text:   var(--ctb-selective-yellow);
  --ctb-color-nav-hover-bg:      rgba(255, 255, 253, 0.08);

  /* ── UI Chips / count badges ─────────────────────────────────────────── */
  --ctb-color-chip-bg:           rgba(255, 187, 0, 0.15);
  --ctb-color-chip-text:         var(--ctb-selective-yellow);

  /* ── Neutral / secondary buttons ─────────────────────────────────────── */
  --ctb-color-btn-neutral-bg:    #252523;
  --ctb-color-btn-neutral-text:  rgba(255, 255, 253, 0.70);

  /* ── Danger / delete buttons ─────────────────────────────────────────── */
  --ctb-color-btn-danger-bg:     rgba(202, 10, 10, 0.15);
  --ctb-color-btn-danger-text:   #FF6B6B;
  --ctb-color-btn-danger-border: rgba(202, 10, 10, 0.40);

  /* ── Warning banner ──────────────────────────────────────────────────── */
  --ctb-color-banner-warn-bg:     rgba(255, 187, 0, 0.10);
  --ctb-color-banner-warn-border: var(--ctb-selective-yellow);
  --ctb-color-banner-cta-bg:      var(--ctb-selective-yellow);
  --ctb-color-banner-cta-text:    var(--ctb-eerie-black);

  /* ── Empty states ────────────────────────────────────────────────────── */
  --ctb-color-empty-bg:          #1E1E1C;
  --ctb-color-empty-border:      rgba(255, 255, 253, 0.15);

  /* ── Quote / message blocks ──────────────────────────────────────────── */
  --ctb-color-quote-bg:          #252523;
  --ctb-color-quote-text:        rgba(255, 255, 253, 0.68);

  /* ── Grade colours (on dark bg — bright, vivid) ───────────────────────── */
  --ctb-color-grade-a:           var(--ctb-jungle-green);    /* #00A682 */
  --ctb-color-grade-b:           #66BB9A;                    /* lighter green */
  --ctb-color-grade-c:           var(--ctb-selective-yellow);/* #FFBB00 */
  --ctb-color-grade-d:           #FF8C00;                    /* orange */
  --ctb-color-grade-e:           #FF6B6B;                    /* vivid red */
  --ctb-color-grade-a-bg:        rgba(0, 166, 130, 0.18);
  --ctb-color-grade-b-bg:        rgba(102, 187, 154, 0.18);
  --ctb-color-grade-c-bg:        rgba(255, 187, 0, 0.18);
  --ctb-color-grade-d-bg:        rgba(255, 140, 0, 0.18);
  --ctb-color-grade-e-bg:        rgba(255, 107, 107, 0.18);

  /* ── Rank / podium colours ────────────────────────────────────────────── */
  --ctb-color-rank-gold:         var(--ctb-selective-yellow);
  --ctb-color-rank-gold-text:    var(--ctb-eerie-black);
  --ctb-color-rank-silver:       #9E9E9E;
  --ctb-color-rank-silver-text:  var(--ctb-baby-powder);
  --ctb-color-rank-bronze:       var(--ctb-jungle-green);    /* #00A682 */
  --ctb-color-rank-bronze-text:  var(--ctb-baby-powder);

  /* ── Auth page gradient seed ─────────────────────────────────────────── */
  --ctb-auth-gradient-from:      rgba(255, 187, 0, 0.12);

  /* ── Focus ring ──────────────────────────────────────────────────────── */
  --ctb-focus-ring:              rgba(0, 166, 130, 0.30);

  /* ── Elevation (dark surfaces use coloured ambient glow) ─────────────── */
  --chepe-elevation-1: 0 1px 4px rgba(0, 116, 91, 0.20), 0 1px 2px rgba(0,0,0,0.30);
  --chepe-elevation-2: 0 3px 8px rgba(0, 116, 91, 0.18), 0 2px 4px rgba(0,0,0,0.30);
  --chepe-elevation-3: 0 8px 24px rgba(0, 116, 91, 0.16), 0 4px 8px rgba(0,0,0,0.30);
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 4 — M3 COMPATIBILITY LAYER
   Maps --md-sys-color-* (used by existing templates) to CTB tokens.
   This layer is applied in BOTH modes so no template edits are needed.
   ══════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"],
[data-theme="light"] {
  /* Primary */
  --md-sys-color-primary:                var(--ctb-color-primary);
  --md-sys-color-on-primary:             var(--ctb-color-on-primary);
  --md-sys-color-primary-container:      var(--ctb-color-primary-container);
  --md-sys-color-on-primary-container:   var(--ctb-color-on-primary-container);

  /* Secondary */
  --md-sys-color-secondary:              var(--ctb-color-secondary);
  --md-sys-color-on-secondary:           var(--ctb-color-on-secondary);
  --md-sys-color-secondary-container:    var(--ctb-color-secondary-container);
  --md-sys-color-on-secondary-container: var(--ctb-color-on-secondary-container);

  /* Tertiary */
  --md-sys-color-tertiary:               var(--ctb-color-tertiary);
  --md-sys-color-on-tertiary:            var(--ctb-color-on-tertiary);
  --md-sys-color-tertiary-container:     var(--ctb-color-tertiary-container);
  --md-sys-color-on-tertiary-container:  var(--ctb-color-on-tertiary-container);

  /* Error */
  --md-sys-color-error:                  var(--ctb-color-error);
  --md-sys-color-on-error:               var(--ctb-color-on-error);
  --md-sys-color-error-container:        var(--ctb-color-error-container);
  --md-sys-color-on-error-container:     var(--ctb-color-on-error-container);

  /* Background & surface */
  --md-sys-color-background:             var(--ctb-color-background);
  --md-sys-color-on-background:          var(--ctb-color-text);
  --md-sys-color-surface:                var(--ctb-color-surface);
  --md-sys-color-on-surface:             var(--ctb-color-text);
  --md-sys-color-surface-variant:        var(--ctb-color-surface-variant);
  --md-sys-color-on-surface-variant:     var(--ctb-color-text-secondary);

  /* Outlines */
  --md-sys-color-outline:                var(--ctb-color-outline);
  --md-sys-color-outline-variant:        var(--ctb-color-outline-variant);

  /* Inverse (used by some M3 components) */
  --md-sys-color-inverse-surface:        var(--ctb-color-text);
  --md-sys-color-inverse-on-surface:     var(--ctb-color-background);
  --md-sys-color-inverse-primary:        var(--ctb-color-primary);

  /* Misc M3 */
  --md-sys-color-surface-tint:           var(--ctb-color-primary);
  --md-sys-color-shadow:                 #000000;
  --md-sys-color-scrim:                  #000000;

  /* ── Grade colour tokens (used in score cells, report cards) ──────────── */
  --chepe-grade-a: var(--ctb-color-grade-a);
  --chepe-grade-b: var(--ctb-color-grade-b);
  --chepe-grade-c: var(--ctb-color-grade-c);
  --chepe-grade-d: var(--ctb-color-grade-d);
  --chepe-grade-e: var(--ctb-color-grade-e);

  /* ── Chart tokens ─────────────────────────────────────────────────────── */
  --chepe-chart-background: var(--ctb-color-background);
  --chepe-chart-element:    var(--ctb-color-primary);
  --chepe-chart-accent:     var(--ctb-color-secondary);

  /* ── Bootstrap shim aliases (used by components.css) ─────────────────── */
  --primary:   var(--ctb-color-primary);
  --secondary: var(--ctb-color-secondary);
  --danger:    var(--ctb-color-error);
  --success:   var(--ctb-color-success);
  --warning:   var(--ctb-color-warning);
  --info:      var(--ctb-color-primary-container);
}