/* ============================================================
   theme.css — Layered Dark Mode · 2026 Design System
   ============================================================
   Load this file FIRST before any other stylesheet.
   All other sheets reference tokens via var(--token).

   Background Hierarchy (depth = lighter in dark mode)
     Base  (L0): #0B0B0C  ← main canvas
     Surface (L1): #161617  ← cards, sidebar, headers
     Overlay (L2): #212122  ← modals, dropdowns, tooltips
     Input:        #1A1A1B  ← recessed fields (sits below surface)

   Accent Palette
     Primary : #A78BFA  (Soft Violet)
     Success : #34D399  (Emerald)
     Warning : #FBBF24  (Amber)
     Error   : #F87171  (Soft Red)
   ============================================================ */

/* ── Default (Light) Theme ───────────────────────────────────── */
:root {
  /* ── Backgrounds ────────────────────────────────────────────── */
  --bg-base:      #F8FAFC;   /* Page canvas                               */
  --bg-surface:   #FFFFFF;   /* Cards, panels                             */
  --bg-overlay:   #F1F5F9;   /* Modals, dropdowns                         */
  --bg-input:     #F8FAFC;   /* Input fields — recessed on surface        */

  /* Legacy aliases */
  --bg-sidebar:   #F1F5F9;   /* Sidebar                                   */
  --bg-elevated:  #FFFFFF;

  /* ── Accent Palette ─────────────────────────────────────────── */
  --accent-primary:  #3B82F6;  /* Blue 500 — 4.5:1 on white (AA) ✓       */
  --accent-success:  #10B981;  /* Emerald 500                             */
  --accent-warning:  #F59E0B;  /* Amber 400                               */
  --accent-error:    #EF4444;  /* Red 500                                 */

  /* Primary with opacity  (#3B82F6 = 59, 130, 246) */
  --accent-primary-06:  rgba(59, 130, 246, 0.06);
  --accent-primary-10:  rgba(59, 130, 246, 0.10);
  --accent-primary-15:  rgba(59, 130, 246, 0.15);
  --accent-primary-25:  rgba(59, 130, 246, 0.25);
  --accent-primary-35:  rgba(59, 130, 246, 0.35);
  --accent-primary-50:  rgba(59, 130, 246, 0.50);

  /* Success with opacity  (#10B981 = 16, 185, 129) */
  --accent-success-10:  rgba(16, 185, 129, 0.10);
  --accent-success-20:  rgba(16, 185, 129, 0.20);

  /* Error with opacity  (#EF4444 = 239, 68, 68) */
  --accent-error-10:    rgba(239, 68, 68, 0.10);
  --accent-error-15:    rgba(239, 68, 68, 0.15);
  --accent-error-20:    rgba(239, 68, 68, 0.20);
  --accent-error-40:    rgba(239, 68, 68, 0.40);
  --accent-error-45:    rgba(239, 68, 68, 0.45);

  /* ── Typography · WCAG 2.2 ──────────────────────────────────── */
  --text-heading: #0F172A;   /* Slate 900 — ~18:1 on bg-base (AAA) ✓     */
  --text-high:    #0F172A;   /* alias                                     */
  --text-body:    #475569;   /* Slate 600 — ~6.1:1 (AA) ✓                */
  --text-med:     #475569;   /* alias                                     */
  --text-muted:   #94A3B8;   /* Slate 400 — 3.0:1 (AA large/UI) ✓       */
  --text-low:     #94A3B8;   /* alias                                     */

  /* ── Borders ─────────────────────────────────────────────────── */
  --border:        #E2E8F0;  /* Slate 200 — default border                */
  --border-medium: #CBD5E1;  /* Slate 300 — visible dividers              */

  /* ── Elevation ───────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px  rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 6px  rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-lg:    0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.05);
  --glow-accent:  0 0 20px   rgba(59, 130, 246, 0.20);
  --glow-success: 0 0 16px   rgba(16, 185, 129, 0.18);

  /* ── Shape ───────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;

  /* ── Motion ──────────────────────────────────────────────────── */
  --transition-fast:   0.12s ease;
  --transition-base:   0.20s ease;
  --transition-smooth: 0.30s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Spacing / Breathing room ────────────────────────────────── */
  --lh-body:    1.6;
  --lh-heading: 1.3;
}

/* ── Dark Theme Override ─────────────────────────────────────── */
[data-theme="dark"] {
  /* ── Background Layers ──────────────────────────────────────── */
  --bg-base:      #0B0B0C;
  --bg-surface:   #161617;
  --bg-overlay:   #212122;
  --bg-input:     #1A1A1B;

  --bg-sidebar:   #161617;
  --bg-elevated:  #161617;

  /* ── Accent Palette ─────────────────────────────────────────── */
  --accent-primary:  #A78BFA;
  --accent-success:  #34D399;
  --accent-warning:  #FBBF24;
  --accent-error:    #F87171;

  /* Primary with opacity  (#A78BFA = 167, 139, 250) */
  --accent-primary-06:  rgba(167, 139, 250, 0.06);
  --accent-primary-10:  rgba(167, 139, 250, 0.10);
  --accent-primary-15:  rgba(167, 139, 250, 0.15);
  --accent-primary-25:  rgba(167, 139, 250, 0.25);
  --accent-primary-35:  rgba(167, 139, 250, 0.35);
  --accent-primary-50:  rgba(167, 139, 250, 0.50);

  /* Success with opacity */
  --accent-success-10:  rgba(52, 211, 153, 0.10);
  --accent-success-20:  rgba(52, 211, 153, 0.20);

  /* Error with opacity */
  --accent-error-10:    rgba(248, 113, 113, 0.10);
  --accent-error-15:    rgba(248, 113, 113, 0.15);
  --accent-error-20:    rgba(248, 113, 113, 0.20);
  --accent-error-40:    rgba(248, 113, 113, 0.40);
  --accent-error-45:    rgba(248, 113, 113, 0.45);

  /* ── Typography ─────────────────────────────────────────────── */
  --text-heading: rgba(255, 255, 255, 0.95);
  --text-high:    rgba(255, 255, 255, 0.95);
  --text-body:    rgba(255, 255, 255, 0.70);
  --text-med:     rgba(255, 255, 255, 0.70);
  --text-muted:   rgba(255, 255, 255, 0.45);
  --text-low:     rgba(255, 255, 255, 0.45);

  /* ── Borders ─────────────────────────────────────────────────── */
  --border:        rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.10);

  /* ── Elevation / Glow ────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.40);
  --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.50);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.60);
  --glow-accent:  0 0 24px   rgba(167, 139, 250, 0.18);
  --glow-success: 0 0 20px   rgba(52, 211, 153, 0.15);
}

/* ── Global Micro-interaction Keyframes ─────────────────────── */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}