/* ============================================================
   css/base/variables.css
   
   FIXES:
   1. Added --primary-rgb token so rgba() works correctly in
      main.css focus box-shadows (rgba(var(--color), 0.25) is
      invalid CSS; rgba requires channel values, not a hex string).
   2. Added --shadow-* tokens so components stop defining their
      own hardcoded shadows.
   3. Added --gradient-brand token so navbar + components that
      share the purple gradient (#667eea → #764ba2) use one
      canonical value.
   4. Dark mode is defined ONLY via [data-theme="dark"] here.
      The @media (prefers-color-scheme: dark) fallback that was
      scattered across component files is removed from those files;
      theme.service.js already reads the OS preference on first load
      and writes [data-theme] accordingly, so this file is the
      single source of truth.
   ============================================================ */

:root,
[data-theme="light"] {
    /* ── Brand palette ────────────────────────────────────────── */
    --primary-color:     #2563eb;
    --primary-dark:      #1d4ed8;
    --primary-rgb:       37, 99, 235;       /* ← NEW: for rgba() usage  */
    --secondary-color:   #475569;
    --success-color:     #22c55e;
    --danger-color:      #ef4444;
    --warning-color:     #f59e0b;
    --info-color:        #0ea5e9;           /* distinct from primary    */

    /* ── Backgrounds ──────────────────────────────────────────── */
    --bg-body:           #f8fafc;
    --bg-card:           #ffffff;
    --bg-sidebar:        #f1f5f9;
    --border-color:      #e2e8f0;

    /* ── Text ─────────────────────────────────────────────────── */
    --text-primary:      #1e293b;
    --text-secondary:    #475569;
    --text-on-primary:   #ffffff;

    /* ── Typography ───────────────────────────────────────────── */
    --font-primary:      'Arial', sans-serif;
    --font-size-base:    1rem;
    --font-size-sm:      0.875rem;
    --font-size-lg:      1.125rem;
    --font-size-xl:      1.25rem;

    /* ── Spacing ──────────────────────────────────────────────── */
    --spacing-xs:        0.25rem;
    --spacing-sm:        0.5rem;
    --spacing-md:        1rem;
    --spacing-lg:        1.5rem;
    --spacing-xl:        2rem;

    /* ── Border radius ────────────────────────────────────────── */
    --border-radius-sm:  0.25rem;
    --border-radius-md:  0.5rem;
    --border-radius-lg:  1rem;

    /* ── Transitions ──────────────────────────────────────────── */
    --transition-base:   all 0.2s ease-in-out;

    /* ── Shadows (NEW) ────────────────────────────────────────── */
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:         0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg:         0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl:         0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);

    /* ── Brand gradient (NEW) ─────────────────────────────────── */
    /* Single canonical source for the purple brand gradient used
       by navbar, pwa-banners, exams-dashboard, gallery, etc.      */
    --gradient-brand:    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success:  linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-info:     linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --gradient-primary:  linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

/* ── Dark theme ───────────────────────────────────────────────── */
[data-theme="dark"] {
    --primary-color:     #3b82f6;
    --primary-dark:      #60a5fa;
    --primary-rgb:       59, 130, 246;
    --secondary-color:   #94a3b8;
    --success-color:     #22c55e;
    --danger-color:      #ef4444;
    --warning-color:     #f59e0b;
    --info-color:        #38bdf8;

    --bg-body:           #0f172a;
    --bg-card:           #1e293b;
    --bg-sidebar:        #1e293b;
    --border-color:      #334155;

    --text-primary:      #f1f5f9;
    --text-secondary:    #94a3b8;
    --text-on-primary:   #ffffff;

    --shadow-sm:         0 1px 3px rgba(0,0,0,0.30);
    --shadow-md:         0 4px 6px -1px rgba(0,0,0,0.40);
    --shadow-lg:         0 10px 15px -3px rgba(0,0,0,0.50);
    --shadow-xl:         0 20px 25px -5px rgba(0,0,0,0.60);
}

/* ── Apply tokens to body ──────────────────────────────────────── */
body {
    background-color: var(--bg-body);
    color: var(--text-secondary);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ── Card theming ──────────────────────────────────────────────── */
.card, .card-body, .card-header {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

h1, h2, h3, h4, h5, h6, .footer-head {
    color: var(--text-primary);
}

/* ── Bootstrap utility class overrides for dark mode ──────────── */
/* These are necessary because Bootstrap hardcodes bg-white / bg-light
   with its own specificity that defeats our body-level var() rule.   */

[data-theme="dark"] .bg-white {
    background-color: var(--bg-body) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-card) !important;
}

/* Bootstrap table */
[data-theme="dark"] .table {
    --bs-table-bg:          var(--bg-card);
    --bs-table-color:       var(--text-primary);
    --bs-table-border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .table-light {
    --bs-table-bg:          var(--bg-card);
    --bs-table-color:       var(--text-primary);
    --bs-table-striped-bg:  var(--bg-body);
}

[data-theme="dark"] thead.table-light th,
[data-theme="dark"] .table-light > * > tr > th,
[data-theme="dark"] .table-light > * > tr > td {
    background-color: var(--bg-card)    !important;
    color:            var(--text-primary) !important;
    border-color:     var(--border-color) !important;
}

/* Bootstrap text utilities */
[data-theme="dark"] .text-dark     { color: var(--text-primary)   !important; }
[data-theme="dark"] .text-muted    { color: var(--text-secondary)  !important; }
[data-theme="dark"] .text-secondary{ color: var(--text-secondary)  !important; }

/* Bootstrap borders */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--border-color) !important;
}

/* Bootstrap list-group */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    border-color:     var(--border-color);
    color:            var(--text-primary);
}

/* Bootstrap dropdown */
[data-theme="dark"] .dropdown-menu    { background-color: var(--bg-card);  border-color: var(--border-color); }
[data-theme="dark"] .dropdown-item    { color: var(--text-secondary); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-body);
    color:            var(--text-primary);
}
[data-theme="dark"] .dropdown-divider { border-color: var(--border-color); }

/* Badge contrast */
[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-card)    !important;
    color:            var(--text-primary) !important;
}

/* Smooth transition on elements most visible during a theme toggle */
.bg-white,
.bg-light,
.table,
.dropdown-menu,
.list-group-item {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}