/**
 * Deal Hive Mind - Design Tokens & Theme Engine
 * Provides CSS custom properties for dual-theme (Dark & Light) mode,
 * and enables templated future themes via [data-theme="<name>"].
 */

:root,
html.dark,
[data-theme="dark"] {
  /* ==========================================================================
     Surfaces & Backgrounds (Default: Modern Dark Canvas)
     ========================================================================== */
  --bg-canvas-rgb: 7 10 19;            /* Deep dark void #070a13 */
  --bg-surface-rgb: 15 20 34;          /* Dark card surface #0f1422 */
  --bg-elevated-rgb: 22 24 35;         /* Elevated modals, dropdowns */
  --border-theme-rgb: 30 41 59;        /* Border stroke #1e293b */

  --bg-canvas: rgb(var(--bg-canvas-rgb));
  --bg-surface: rgb(var(--bg-surface-rgb));
  --bg-elevated: rgb(var(--bg-elevated-rgb));
  --border-theme: rgb(var(--border-theme-rgb));

  /* ==========================================================================
     Typography & Foregrounds (High-Contrast Dark Mode)
     ========================================================================== */
  --text-primary-rgb: 248 250 252;     /* Slate-50: Titles, headings #f8fafc */
  --text-secondary-rgb: 203 213 225;   /* Slate-300: Body copy, content #cbd5e1 */
  --text-muted-rgb: 148 163 184;       /* Slate-400: Timestamps, hints #94a3b8 */
  --text-inverse-rgb: 15 23 42;        /* Dark text on inverted light surfaces */

  --text-primary: rgb(var(--text-primary-rgb));
  --text-secondary: rgb(var(--text-secondary-rgb));
  --text-muted: rgb(var(--text-muted-rgb));
  --text-inverse: rgb(var(--text-inverse-rgb));

  /* ==========================================================================
     Brand & Category Accents (Tuned for Dark Canvas, WCAG AA >= 4.5:1)
     ========================================================================== */
  --brand-blue-rgb: 96 165 250;        /* Blue-400 #60a5fa (>7:1 on dark) */
  --brand-indigo-rgb: 129 140 248;     /* Indigo-400 #818cf8 (>6:1 on dark) */
  --brand-purple-rgb: 192 132 252;     /* Purple-400 #c084fc (>6.5:1 on dark) */
  --brand-green-rgb: 52 211 153;       /* Emerald-400 #34d399 (>7:1 on dark) */
  --brand-amber-rgb: 251 191 36;       /* Amber-400 #fbbf24 (>9:1 on dark) */
  --brand-orange-rgb: 251 146 60;      /* Orange-400 #fb923c (>7.5:1 on dark) */
  --brand-rose-rgb: 251 113 133;       /* Rose-400 #fb7185 (>6.5:1 on dark) */
  --brand-pink-rgb: 244 114 182;       /* Pink-400 #f472b6 (>6.5:1 on dark) */

  --brand-blue: rgb(var(--brand-blue-rgb));
  --brand-indigo: rgb(var(--brand-indigo-rgb));
  --brand-purple: rgb(var(--brand-purple-rgb));
  --brand-green: rgb(var(--brand-green-rgb));
  --brand-amber: rgb(var(--brand-amber-rgb));
  --brand-orange: rgb(var(--brand-orange-rgb));
  --brand-rose: rgb(var(--brand-rose-rgb));
  --brand-pink: rgb(var(--brand-pink-rgb));
}

html.light,
[data-theme="light"] {
  /* ==========================================================================
     Surfaces & Backgrounds (Clean Modern Light Mode)
     ========================================================================== */
  --bg-canvas-rgb: 241 245 249;        /* Slate-100 canvas #f1f5f9 */
  --bg-surface-rgb: 255 255 255;       /* Pure white card surface #ffffff */
  --bg-elevated-rgb: 255 255 255;      /* Crisp white elevated */
  --border-theme-rgb: 226 232 240;     /* Slate-200 border #e2e8f0 */

  /* ==========================================================================
     Typography & Foregrounds (WCAG AA Compliant Light Mode)
     ========================================================================== */
  --text-primary-rgb: 15 23 42;        /* Slate-900: Titles, headings #0f172a (>14:1) */
  --text-secondary-rgb: 51 65 85;      /* Slate-700: Body copy #334155 (>7:1) */
  --text-muted-rgb: 71 85 105;        /* Slate-600: Metadata, hints #475569 (>5.7:1) */
  --text-inverse-rgb: 255 255 255;     /* Pure white on dark/brand surfaces */

  /* ==========================================================================
     Brand & Category Accents (High-Contrast WCAG AA >= 4.5:1 on Light Mode)
     ========================================================================== */
  --brand-blue-rgb: 29 78 216;         /* Blue-700 #1d4ed8 (>5.4:1 on white) */
  --brand-indigo-rgb: 67 56 202;       /* Indigo-700 #4338ca (>5.6:1 on white) */
  --brand-purple-rgb: 126 34 206;      /* Purple-700 #7e22ce (>5.8:1 on white) */
  --brand-green-rgb: 4 120 87;         /* Emerald-700 #047857 (>5.0:1 on white) */
  --brand-amber-rgb: 146 64 14;        /* Amber-800 #92400e (>5.5:1 on white) */
  --brand-orange-rgb: 154 52 18;       /* Orange-800 #9a3412 (>5.4:1 on white) */
  --brand-rose-rgb: 190 18 60;         /* Rose-700 #be123c (>5.2:1 on white) */
  --brand-pink-rgb: 190 24 93;         /* Pink-700 #be185d (>5.2:1 on white) */
}

/* ==========================================================================
   Future Theme Extension Template Example:
   To add a new theme in the future, simply define the tokens under [data-theme="<name>"]:

   [data-theme="oled"] {
     --bg-canvas-rgb: 0 0 0;
     --bg-surface-rgb: 10 10 10;
     --border-theme-rgb: 26 26 26;
     --text-primary-rgb: 255 255 255;
     --text-secondary-rgb: 212 212 216;
     --text-muted-rgb: 161 161 170;
   }
   ========================================================================== */