/* ═══════════════════════════════════════════════════════════════════════
   THEME REGISTRY — DataOS

   To add a new theme:
     1. Add the id to the @theme-registry comma list at the top.
     2. Add a [data-theme="<id>"] block redefining any tokens you want.
     3. (Optional) add a label/emoji pair so the picker shows it nicely.

   That's it. The picker (static/js/theme_toggle.js) auto-discovers themes
   from the registry — no JS changes required.

   ─────────────────────────────────────────────────────────────────────
   TOKEN CONTRACT
   ─────────────────────────────────────────────────────────────────────
   Components in static/css/*.css consume the tokens listed below.
   A complete theme defines ALL of them. A partial theme can omit any
   token; it will inherit the dark default.

     Surfaces:        --bg-primary, --bg-secondary, --bg-card,
                      --bg-card-hover, --bg-tertiary
     Borders:         --border, --border-light
     Text:            --text-primary, --text-secondary, --text-muted,
                      --text-on-accent
     Accent ladder:   --accent, --accent-light, --accent-dark
     Accent tints:    --accent-subtle, --accent-bg-subtle,
                      --accent-bg, --accent-bg-strong, --accent-on-subtle
     Semantic:        --success, --warning, --error/--danger,
                      --success-bg, --warning-bg, --error-bg,
                      --success-bg-subtle, --warning-bg-subtle,
                      --danger-bg-subtle, --purple-bg-subtle,
                      --cyan-bg-subtle
     Brand colors:    --purple, --cyan, --pink
     Gradients:       --gradient-primary, --gradient-success,
                      --gradient-danger, --gradient-purple,
                      --gradient-logo
     Shadows:         --shadow, --shadow-md, --shadow-lg, --shadow-glow
     Overlays:        --overlay-backdrop
     Logo variant:    --logo-light-display, --logo-dark-display
     Charts:          --chart-1 .. --chart-5
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── REGISTRY (consumed by theme_toggle.js) ─────────────────────────── */
:root {
  --theme-registry: "dark, pastel, midnight, sage, demo";

  --theme-dark-label: "Dark";
  --theme-dark-emoji: "🌑";

  --theme-pastel-label: "Pastel";
  --theme-pastel-emoji: "🎨";

  --theme-midnight-label: "Midnight";
  --theme-midnight-emoji: "🌌";

  --theme-sage-label: "Sage";
  --theme-sage-emoji: "🌿";

  --theme-demo-label: "Demo";
  --theme-demo-emoji: "🎭";
}


/* ═══════════════════════════════════════════════════════════════════════
   THEME: dark (default)
   ═══════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --bg-primary: #0a0f1a;
  --bg-secondary: #111827;
  --bg-card: #1a2234;
  --bg-card-hover: #1f2937;
  --bg-tertiary: #1e293b;

  /* Borders */
  --border: #2d3748;
  --border-primary: var(--border);
  --border-light: #374151;

  /* Text */
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --text-tertiary: #6b7280;
  --text-on-accent: #ffffff;

  /* Accent ladder */
  --accent: #3b82f6;
  --accent-light: #60a5fa;
  --accent-dark: #2563eb;
  --primary: var(--accent);

  /* Accent tints — replaces ad-hoc rgba(59,130,246,...) usage in components */
  --accent-subtle: rgba(59, 130, 246, 0.10);
  --accent-bg-subtle: rgba(59, 130, 246, 0.08);
  --accent-bg: rgba(59, 130, 246, 0.15);
  --accent-bg-strong: rgba(59, 130, 246, 0.25);
  --accent-on-subtle: var(--accent-light);
  --accent-rgb: 59, 130, 246;

  /* Semantic */
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.10);
  --success-bg-subtle: rgba(16, 185, 129, 0.08);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.10);
  --warning-bg-subtle: rgba(245, 158, 11, 0.08);
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.10);
  --danger: #ef4444;
  --danger-bg-subtle: rgba(239, 68, 68, 0.08);

  /* Brand colors + tints */
  --purple: #8b5cf6;
  --purple-bg-subtle: rgba(139, 92, 246, 0.08);
  --cyan: #06b6d4;
  --cyan-bg-subtle: rgba(6, 182, 212, 0.08);
  --pink: #ec4899;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--accent-dark), var(--accent));
  --gradient-success: linear-gradient(135deg, #059669, var(--success));
  --gradient-danger: linear-gradient(135deg, #dc2626, var(--error));
  --gradient-purple: linear-gradient(135deg, #7c3aed, var(--purple));
  --gradient-logo: linear-gradient(135deg, var(--text-primary), var(--accent-light));

  /* Shape + motion */
  --radius: 12px;
  --radius-sm: 8px;
  --transition: all 0.2s ease;

  /* Shadows */
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 0 2px rgba(59, 130, 246, 0.2);

  /* Overlays */
  --overlay-backdrop: rgba(0, 0, 0, 0.7);

  /* Logo */
  --logo-light-display: none;
  --logo-dark-display: inline;

  /* Font scale (themes rarely override these but they're tokens) */
  --font-2xs: 11px;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-2xl: 20px;
  --font-3xl: 24px;
  --font-4xl: 28px;

  /* Charts */
  --chart-1: #6366f1;
  --chart-2: #22c55e;
  --chart-3: #f59e0b;
  --chart-4: #ec4899;
  --chart-5: #06b6d4;

  /* Per-page accent ladder consumed by lead_scoring.css and friends.
     Defining here kills the parallel variable system that file used to maintain. */
  --accent-cyan: var(--cyan);
  --accent-teal: #14b8a6;
  --accent-emerald: var(--success);
  --accent-violet: var(--purple);
  --accent-amber: var(--warning);
  --accent-rose: #f43f5e;
  --border-color: var(--border);
  --glow-cyan: rgba(6, 182, 212, 0.3);
  --glow-teal: rgba(20, 184, 166, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════
   THEME: pastel
   `.pastel-mode` is kept as a bridge selector so legacy
   `.pastel-mode .foo { ... }` overrides scattered through page CSS keep
   firing. Once those overrides are converted to use tokens, the bridge
   class can be retired.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="pastel"],
.pastel-mode {
  /* Surfaces */
  --bg-primary: #fff1f2;        /* Rose 50 */
  --bg-secondary: #ffffff;
  --bg-card: #fff5f7;
  --bg-card-hover: #ffe4e6;     /* Rose 100 */
  --bg-tertiary: #fdf2f8;

  /* Borders */
  --border: #fecdd3;            /* Rose 200 */
  --border-light: #fda4af;      /* Rose 300 */

  /* Text */
  --text-primary: #881337;      /* Rose 900 */
  --text-secondary: #9d174d;    /* Pink 800 */
  --text-muted: #be185d;        /* Pink 700 */
  --text-on-accent: #ffffff;

  /* Accent ladder */
  --accent: #f472b6;            /* Pink 400 */
  --accent-light: #db2777;      /* Pink 600 — readable on light backgrounds */
  --accent-dark: #be185d;       /* Pink 700 */

  /* Accent tints */
  --accent-subtle: rgba(244, 114, 182, 0.12);
  --accent-bg-subtle: rgba(190, 24, 93, 0.08);
  --accent-bg: rgba(190, 24, 93, 0.15);
  --accent-bg-strong: rgba(190, 24, 93, 0.25);
  --accent-on-subtle: #be185d;
  --accent-rgb: 244, 114, 182;

  /* Semantic — slightly stronger backgrounds for contrast on light surfaces */
  --success-bg: rgba(16, 185, 129, 0.18);
  --warning-bg: rgba(245, 158, 11, 0.18);
  --error-bg: rgba(239, 68, 68, 0.18);
  --success-bg-subtle: rgba(16, 185, 129, 0.10);
  --warning-bg-subtle: rgba(245, 158, 11, 0.10);
  --danger-bg-subtle: rgba(239, 68, 68, 0.10);

  /* Brand colors */
  --purple: #c084fc;
  --cyan: #22d3ee;
  --pink: #f472b6;
  --purple-bg-subtle: rgba(192, 132, 252, 0.10);
  --cyan-bg-subtle: rgba(34, 211, 238, 0.10);

  /* Gradients — pink ramp instead of blue */
  --gradient-primary: linear-gradient(135deg, var(--accent-dark), var(--accent));
  --gradient-logo: linear-gradient(135deg, var(--text-primary), var(--accent-dark));

  /* Shadows softer + warmer */
  --shadow: 0 4px 20px rgba(190, 24, 93, 0.10);
  --shadow-md: 0 4px 12px rgba(190, 24, 93, 0.12);
  --shadow-lg: 0 8px 24px rgba(190, 24, 93, 0.15);
  --shadow-glow: 0 0 0 2px rgba(244, 114, 182, 0.25);

  /* Overlays */
  --overlay-backdrop: rgba(157, 23, 77, 0.35);

  /* Logo (pastel uses light logo) */
  --logo-light-display: inline;
  --logo-dark-display: none;

  /* Charts */
  --chart-1: #f472b6;
  --chart-2: #34d399;
  --chart-3: #fbbf24;
  --chart-4: #a78bfa;
  --chart-5: #22d3ee;

  /* Per-page accent ladder repointed to pink */
  --accent-cyan: #f472b6;
  --accent-teal: #ec4899;
  --accent-emerald: #10b981;
  --accent-violet: #db2777;
  --accent-amber: #f59e0b;
  --accent-rose: #ef4444;
  --border-color: rgba(251, 207, 232, 0.5);
  --glow-cyan: rgba(244, 114, 182, 0.3);
  --glow-teal: rgba(236, 72, 153, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════
   THEME: midnight
   AMOLED-friendly true-black with cool indigo accents.
   Demonstrates that a new theme = one block of variable values.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="midnight"] {
  /* Surfaces */
  --bg-primary: #000000;
  --bg-secondary: #07080d;
  --bg-card: #0d1018;
  --bg-card-hover: #141826;
  --bg-tertiary: #0a0d15;

  /* Borders */
  --border: #1a1f2e;
  --border-light: #252b3d;

  /* Text */
  --text-primary: #e6e9f5;
  --text-secondary: #a3a8be;
  --text-muted: #6b7090;
  --text-on-accent: #ffffff;

  /* Accent ladder — cool indigo */
  --accent: #818cf8;
  --accent-light: #a5b4fc;
  --accent-dark: #6366f1;

  /* Accent tints */
  --accent-subtle: rgba(129, 140, 248, 0.10);
  --accent-bg-subtle: rgba(129, 140, 248, 0.08);
  --accent-bg: rgba(129, 140, 248, 0.18);
  --accent-bg-strong: rgba(129, 140, 248, 0.30);
  --accent-on-subtle: var(--accent-light);
  --accent-rgb: 129, 140, 248;

  /* Brand colors */
  --purple: #a78bfa;
  --cyan: #22d3ee;
  --pink: #f472b6;
  --purple-bg-subtle: rgba(167, 139, 250, 0.10);
  --cyan-bg-subtle: rgba(34, 211, 238, 0.10);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #4f46e5, #818cf8);
  --gradient-logo: linear-gradient(135deg, var(--text-primary), var(--accent-light));

  /* Shadows — deeper for true-black canvas */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 2px rgba(129, 140, 248, 0.30);

  /* Overlays */
  --overlay-backdrop: rgba(0, 0, 0, 0.85);

  /* Logo (midnight uses dark logo, same as dark theme) */
  --logo-light-display: none;
  --logo-dark-display: inline;

  /* Charts */
  --chart-1: #818cf8;
  --chart-2: #34d399;
  --chart-3: #fbbf24;
  --chart-4: #f472b6;
  --chart-5: #22d3ee;
}


/* ═══════════════════════════════════════════════════════════════════════
   THEME: sage
   Warm light theme with deep-sage accents. Cream surfaces, dark
   forest text, muted earthy semantic colors.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="sage"] {
  /* Surfaces */
  --bg-primary: #f4f7f0;        /* Sage 50, very pale cream */
  --bg-secondary: #ffffff;
  --bg-card: #f8faf5;
  --bg-card-hover: #ebf1e6;     /* Sage 100 */
  --bg-tertiary: #eef3e9;

  /* Borders */
  --border: #d4ddc8;            /* Sage 200 */
  --border-light: #b8c8a8;      /* Sage 300 */

  /* Text */
  --text-primary: #2f4329;      /* Sage 800 — deep forest */
  --text-secondary: #405939;    /* Sage 700 */
  --text-muted: #6b8e60;        /* Sage 500 */
  --text-on-accent: #ffffff;

  /* Accent ladder — deep sage */
  --accent: #6b8e60;            /* Sage 500 */
  --accent-light: #547349;      /* Sage 600 — readable on light backgrounds */
  --accent-dark: #405939;       /* Sage 700 */

  /* Accent tints */
  --accent-subtle: rgba(107, 142, 96, 0.10);
  --accent-bg-subtle: rgba(84, 115, 73, 0.08);
  --accent-bg: rgba(84, 115, 73, 0.15);
  --accent-bg-strong: rgba(84, 115, 73, 0.25);
  --accent-on-subtle: #405939;
  --accent-rgb: 107, 142, 96;

  /* Semantic — slightly stronger backgrounds for contrast on cream surfaces */
  --success-bg: rgba(16, 185, 129, 0.18);
  --warning-bg: rgba(217, 119, 6, 0.18);
  --error-bg: rgba(220, 38, 38, 0.18);
  --success-bg-subtle: rgba(16, 185, 129, 0.10);
  --warning-bg-subtle: rgba(217, 119, 6, 0.10);
  --danger-bg-subtle: rgba(220, 38, 38, 0.10);

  /* Brand colors — earthy palette that complements sage */
  --purple: #8b7aa1;            /* Muted mauve */
  --cyan: #5a9b9b;              /* Sage-teal */
  --pink: #c89d9d;              /* Dusty rose */
  --purple-bg-subtle: rgba(139, 122, 161, 0.10);
  --cyan-bg-subtle: rgba(90, 155, 155, 0.10);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--accent-dark), var(--accent));
  --gradient-logo: linear-gradient(135deg, var(--text-primary), var(--accent-dark));

  /* Shadows — soft warm */
  --shadow: 0 4px 20px rgba(64, 89, 57, 0.10);
  --shadow-md: 0 4px 12px rgba(64, 89, 57, 0.12);
  --shadow-lg: 0 8px 24px rgba(64, 89, 57, 0.15);
  --shadow-glow: 0 0 0 2px rgba(107, 142, 96, 0.25);

  /* Overlays */
  --overlay-backdrop: rgba(45, 60, 35, 0.40);

  /* Logo (sage uses light logo) */
  --logo-light-display: inline;
  --logo-dark-display: none;

  /* Charts — earthy ramp */
  --chart-1: #6b8e60;           /* sage */
  --chart-2: #d4a574;           /* warm tan */
  --chart-3: #c89d9d;           /* dusty rose */
  --chart-4: #8b7aa1;           /* mauve */
  --chart-5: #5a9b9b;           /* sage-teal */

  /* Per-page accent ladder repointed */
  --accent-cyan: #5a9b9b;
  --accent-teal: #6b8e60;
  --accent-emerald: #547349;
  --accent-violet: #8b7aa1;
  --accent-amber: #d4a574;
  --accent-rose: #c89d9d;
  --border-color: rgba(212, 221, 200, 0.6);
  --glow-cyan: rgba(107, 142, 96, 0.3);
  --glow-teal: rgba(90, 155, 155, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════
   THEME: demo — sage palette + live privacy mask (see demo_mode.css/js)
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="demo"] {
  --bg-primary: #f4f6f0;
  --bg-secondary: #e8ede2;
  --bg-card: #fafbf8;
  --bg-card-hover: #f0f3eb;
  --bg-tertiary: #e2e8d8;

  --border: #d4ddc8;
  --border-light: #b8c8a8;

  --text-primary: #2f4329;
  --text-secondary: #405939;
  --text-muted: #6b8e60;
  --text-on-accent: #ffffff;

  --accent: #6b8e60;
  --accent-light: #547349;
  --accent-dark: #405939;

  --accent-subtle: rgba(107, 142, 96, 0.10);
  --accent-bg-subtle: rgba(84, 115, 73, 0.08);
  --accent-bg: rgba(84, 115, 73, 0.15);
  --accent-bg-strong: rgba(84, 115, 73, 0.25);
  --accent-on-subtle: #405939;
  --accent-rgb: 107, 142, 96;

  --success-bg: rgba(16, 185, 129, 0.18);
  --warning-bg: rgba(217, 119, 6, 0.18);
  --error-bg: rgba(220, 38, 38, 0.18);
  --success-bg-subtle: rgba(16, 185, 129, 0.10);
  --warning-bg-subtle: rgba(217, 119, 6, 0.10);
  --danger-bg-subtle: rgba(220, 38, 38, 0.10);

  --purple: #8b7aa1;
  --cyan: #5a9b9b;
  --pink: #c89d9d;
  --purple-bg-subtle: rgba(139, 122, 161, 0.10);
  --cyan-bg-subtle: rgba(90, 155, 155, 0.10);

  --gradient-primary: linear-gradient(135deg, var(--accent-dark), var(--accent));
  --gradient-logo: linear-gradient(135deg, var(--text-primary), var(--accent-dark));

  --shadow: 0 4px 20px rgba(64, 89, 57, 0.10);
  --shadow-md: 0 4px 12px rgba(64, 89, 57, 0.12);
  --shadow-lg: 0 8px 24px rgba(64, 89, 57, 0.15);
  --shadow-glow: 0 0 0 2px rgba(107, 142, 96, 0.25);

  --overlay-backdrop: rgba(45, 60, 35, 0.40);

  --logo-light-display: inline;
  --logo-dark-display: none;

  --chart-1: #6b8e60;
  --chart-2: #d4a574;
  --chart-3: #c89d9d;
  --chart-4: #8b7aa1;
  --chart-5: #5a9b9b;

  --accent-cyan: #5a9b9b;
  --accent-teal: #6b8e60;
  --accent-emerald: #547349;
  --accent-violet: #8b7aa1;
  --accent-amber: #d4a574;
  --accent-rose: #c89d9d;
  --border-color: rgba(212, 221, 200, 0.6);
  --glow-cyan: rgba(107, 142, 96, 0.3);
  --glow-teal: rgba(90, 155, 155, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════
   THEME-AWARE GLOBAL UTILITIES
   These rules belong here (not base.css) because they consume
   theme-defined tokens to switch behaviour per theme.
   ═══════════════════════════════════════════════════════════════════════ */

/* Logo swap — driven by per-theme display tokens */
.logo-light { display: var(--logo-light-display, none); }
.logo-dark  { display: var(--logo-dark-display, inline); }


/* ═══════════════════════════════════════════════════════════════════════
   THEME PICKER COMPONENT
   Rendered by static/js/theme_toggle.js into any element with the
   [data-theme-picker] attribute. Style it once here so every host
   gets the same look.
   ═══════════════════════════════════════════════════════════════════════ */
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.theme-picker-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.theme-picker-option:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.theme-picker-option.active {
  background: var(--accent-bg);
  color: var(--accent-on-subtle);
  box-shadow: var(--shadow-glow);
}

/* Compact (sidebar) variant — full-width row of buttons */
.theme-picker.compact {
  display: flex;
  width: 100%;
  justify-content: space-around;
}