/* === BLUEDJEDI MASTER COLOR DEFINITIONS === */
/* Single source of truth - edit colors here, then run master.py to deploy */

:root {
  /* =========================== */
  /* LIGHT MODE COLORS           */
  /* =========================== */
  
  /* Blue Theme - from master.css/colors.css */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;
  
  /* Misc/Gray Theme - from master.css/colors.css */
  --misc-50: #f8fafc;
  --misc-100: #f1f5f9;
  --misc-300: #cbd5e1;
  --misc-500: #64748b;
  --misc-700: #334155;
  --misc-900: #0f172a;
  
  /* Chart Colors - from static/js/charts.js */
  --chart-primary: #4fc3f7;
  --chart-secondary: #29b6f6;
  --chart-success: #81c784;
  --chart-warning: #ff9800;
  --chart-text: #e0e0e0;
  
  /* Temple Theme - from tailwind.config.js */
  --temple-dark: #0c0c0c;
  --temple-mid: #1a1a2e;
  --temple-light: #16213e;
  --temple-accent: #4fc3f7;
  --temple-accent-dark: #29b6f6;
  --temple-success: #81c784;
  --temple-warning: #ff9800;
  --temple-error: #f44336;
  
  /* =========================== */
  /* DARK MODE COLORS            */
  /* =========================== */
  
  /* Dark mode text - softer whites */
  --text-primary-dark: #f1f5f9;    /* Soft white */
  --text-secondary-dark: #94a3b8;  /* Muted gray */
  --text-accent-dark: #7dd3fc;     /* Light cyan-blue */
  
  /* Dark mode backgrounds */
  --bg-primary-dark: #0f172a;      /* Very dark blue */
  --bg-secondary-dark: #1e293b;    /* Dark slate */
  --bg-accent-dark: #334155;       /* Medium slate */
  
  /* =========================== */
  /* LIGHT MODE COLORS           */
  /* =========================== */
  
  /* Light mode text */
  --text-primary-light: #1e293b;   /* Dark slate */
  --text-secondary-light: #64748b; /* Medium gray */
  --text-accent-light: #0ea5e9;    /* Blue */
  
  /* Light mode backgrounds */
  --bg-primary-light: #ffffff;     /* White */
  --bg-secondary-light: #f8fafc;   /* Very light gray */
  --bg-accent-light: #e2e8f0;      /* Light gray */
}

/* =========================== */
/* UTILITY CLASSES             */
/* =========================== */

/* Dark mode utilities (default) */
.bg-blue-500 { background-color: var(--blue-500); }
.bg-blue-900 { background-color: var(--blue-900); }
.bg-misc-300 { background-color: var(--misc-300); }
.bg-misc-900 { background-color: var(--misc-900); }

.text-blue-300 { color: var(--blue-300); }
.text-blue-500 { color: var(--blue-500); }
.text-misc-300 { color: var(--misc-300); }
.text-misc-500 { color: var(--misc-500); }

.border-blue-500 { border-color: var(--blue-500); }
.border-misc-300 { border-color: var(--misc-300); }

/* Hover variants */
.hover-blue-300:hover { color: var(--blue-300); }
.hover-blue-500:hover { color: var(--blue-500); }

/* Dark mode semantic classes */
.text-primary { color: var(--text-primary-dark); }
.text-secondary { color: var(--text-secondary-dark); }
.text-accent { color: var(--text-accent-dark); }
.bg-primary { background-color: var(--bg-primary-dark); }
.bg-secondary { background-color: var(--bg-secondary-dark); }

/* Light mode override (when .light class is added to body) */
.light .text-primary { color: var(--text-primary-light); }
.light .text-secondary { color: var(--text-secondary-light); }
.light .text-accent { color: var(--text-accent-light); }
.light .bg-primary { background-color: var(--bg-primary-light); }
.light .bg-secondary { background-color: var(--bg-secondary-light); }

/* =========================== */
/* BODY THEME SWITCHING        */
/* =========================== */

/* Default dark mode body */
body {
    background: linear-gradient(135deg, var(--misc-900) 0%, var(--blue-900) 50%, var(--misc-700) 100%);
    color: var(--text-primary-dark);
}

/* Light mode body */
body.light {
    background: linear-gradient(135deg, var(--bg-primary-light) 0%, var(--blue-100) 50%, var(--bg-secondary-light) 100%);
    color: var(--text-primary-light);
}