/* ============================================================
   BASE.CSS — Design tokens + reset  (light content / dark sidebar)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Content area (light) ───────────────────────────── */
  --bg:              #f8fafc;
  --bg-alt:          #f1f5f9;
  --color-text:      #1e293b;
  --color-text-soft: #475569;
  --color-muted:     #94a3b8;
  --color-border:    #e2e8f0;

  /* ── Sidebar (dark) ─────────────────────────────────── */
  --nav-bg:          #0f0820;
  --nav-text:        rgba(255,255,255,0.7);
  --nav-text-active: #ffffff;
  --nav-border:      rgba(255,255,255,0.08);

  /* ── Accent colors ──────────────────────────────────── */
  --color-purple:    #6d28d9;
  --color-purple-dk: #4c1d95;
  --color-purple-lt: #ede9fe;
  --color-amber:     #d97706;
  --color-amber-lt:  #fef3c7;

  /* ── Status colors ──────────────────────────────────── */
  --color-success:   #16a34a;
  --color-success-lt:#dcfce7;
  --color-danger:    #dc2626;
  --color-danger-lt: #fee2e2;
  --color-warning:   #d97706;
  --color-warning-lt:#fef3c7;

  /* ── Cards / inputs ─────────────────────────────────── */
  --card-bg:         #ffffff;
  --card-border:     #e2e8f0;
  --card-shadow:     0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);

  --input-bg:        #ffffff;
  --input-border:    #cbd5e1;
  --input-focus-border: #6d28d9;
  --input-focus-ring: rgba(109,40,217,0.15);

  --progress-bg:     #e2e8f0;

  --radius:          6px;
  --sidebar-w:       240px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--color-purple); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: 'Bebas Neue', cursive;
  letter-spacing: 0.06em;
  font-weight: 400;
  color: var(--color-text);
}

button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; color: var(--color-text); }

/* Auth pages keep dark background */
.auth-page {
  background: #040405;
  color: #e2e8f0;
}

/* ── Utility ──────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-muted   { color: var(--color-muted); }
.text-purple  { color: var(--color-purple); }