/* ═══════════════════════════════════════════════════════════════════════════
   BENEVOLATE v3 — Base CSS
   Material Design 3-inspired design system
   Tokens, reset, typography
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Theme: Dark (default) ────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Surface hierarchy (MD3 elevation) */
  --surface-0:        #0f1117;
  --surface-1:        #161b27;
  --surface-2:        #1c2333;
  --surface-3:        #222a3d;
  --surface-4:        #283246;

  /* Text */
  --text-primary:     #e8eaf6;
  --text-secondary:   #9aa0b4;
  --text-tertiary:    #616980;
  --text-disabled:    #3d4357;

  /* Brand / Accent */
  --accent:           #4f8ef7;
  --accent-hover:     #6ba3ff;
  --accent-subtle:    rgba(79, 142, 247, 0.10);
  --accent-border:    rgba(79, 142, 247, 0.25);

  /* Status */
  --success:          #34c785;
  --success-subtle:   rgba(52, 199, 133, 0.10);
  --warning:          #f5a623;
  --warning-subtle:   rgba(245, 166, 35, 0.10);
  --error:            #f25f5c;
  --error-subtle:     rgba(242, 95, 92, 0.10);
  --info:             #4f8ef7;

  /* Tier colors for badges */
  --bronze:           #cd7f32;
  --silver:           #9e9e9e;
  --gold:             #ffd700;
  --platinum:         #b5d5f5;

  /* Borders */
  --border:           rgba(255,255,255,0.07);
  --border-strong:    rgba(255,255,255,0.14);

  /* Sidebar */
  --sidebar-bg:       #13172200;
  --sidebar-width:    240px;
  --sidebar-border:   rgba(255,255,255,0.06);

  /* Topbar */
  --topbar-height:    56px;
  --topbar-bg:        rgba(15, 17, 23, 0.85);

  /* Input */
  --input-bg:         #1c2333;
  --input-border:     rgba(255,255,255,0.10);
  --input-focus:      #4f8ef7;

  /* Card */
  --card-bg:          #161b27;
  --card-bg-hover:    #1c2333;
  --card-border:      rgba(255,255,255,0.07);
  --card-shadow:      0 2px 8px rgba(0,0,0,0.32);

  /* Code/terminal */
  --terminal-bg:      #0d1117;
  --terminal-text:    #e6edf3;
  --terminal-prompt:  #34c785;
  --terminal-error:   #f25f5c;
  --terminal-comment: #8b949e;

  /* Scrollbar */
  --scrollbar-track:  #161b27;
  --scrollbar-thumb:  #2d3347;
}

/* ── Theme: Light ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --surface-0:        #f8faff;
  --surface-1:        #ffffff;
  --surface-2:        #f1f4fb;
  --surface-3:        #e8edf8;
  --surface-4:        #dde4f2;

  --text-primary:     #0d1117;
  --text-secondary:   #4a5568;
  --text-tertiary:    #718096;
  --text-disabled:    #a0aec0;

  --accent:           #2563eb;
  --accent-hover:     #1d4ed8;
  --accent-subtle:    rgba(37, 99, 235, 0.08);
  --accent-border:    rgba(37, 99, 235, 0.25);

  --success:          #059669;
  --success-subtle:   rgba(5, 150, 105, 0.08);
  --warning:          #d97706;
  --warning-subtle:   rgba(217, 119, 6, 0.08);
  --error:            #dc2626;
  --error-subtle:     rgba(220, 38, 38, 0.08);

  --border:           rgba(0,0,0,0.08);
  --border-strong:    rgba(0,0,0,0.16);

  --sidebar-bg:       rgba(255,255,255,0.95);
  --sidebar-border:   rgba(0,0,0,0.06);

  --topbar-bg:        rgba(248, 250, 255, 0.92);

  --input-bg:         #ffffff;
  --input-border:     rgba(0,0,0,0.12);
  --input-focus:      #2563eb;

  --card-bg:          #ffffff;
  --card-bg-hover:    #f5f7ff;
  --card-border:      rgba(0,0,0,0.08);
  --card-shadow:      0 2px 8px rgba(0,0,0,0.08);

  --terminal-bg:      #1a1a2e;
  --terminal-text:    #e6edf3;
  --terminal-prompt:  #34c785;

  --scrollbar-track:  #f0f2f8;
  --scrollbar-thumb:  #cbd5e0;
}

/* ── Theme: Cinematic ─────────────────────────────────────────────────────── */
[data-theme="cinematic"] {
  --surface-0:        #070314;
  --surface-1:        #0c0e1a;
  --surface-2:        #151122;
  --surface-3:        #1e192a;
  --surface-4:        #221d2f;

  --text-primary:     #e8def7;
  --text-secondary:   #c7c4d7;
  --text-tertiary:    #908fa0;
  --text-disabled:    #464554;

  --accent:           #c0c1ff;
  --accent-hover:     #ddb7ff;
  --accent-subtle:    rgba(192, 193, 255, 0.10);
  --accent-border:    rgba(192, 193, 255, 0.25);

  --success:          #34c785;
  --success-subtle:   rgba(52, 199, 133, 0.10);
  --warning:          #eac33e;
  --warning-subtle:   rgba(234, 195, 62, 0.10);
  --error:            #ffb4ab;
  --error-subtle:     rgba(255, 180, 171, 0.10);

  --border:           rgba(255,255,255,0.06);
  --border-strong:    rgba(255,255,255,0.12);

  --sidebar-bg:       rgba(21, 17, 34, 0.3);
  --sidebar-border:   rgba(255,255,255,0.05);

  --topbar-bg:        rgba(7, 3, 20, 0.75);

  --input-bg:         rgba(30, 25, 42, 0.8);
  --input-border:     rgba(255,255,255,0.10);
  --input-focus:      #c0c1ff;

  --card-bg:          rgba(21, 17, 34, 0.75);
  --card-bg-hover:    rgba(30, 25, 42, 0.85);
  --card-border:      rgba(255,255,255,0.06);
  --card-shadow:      0 4px 24px rgba(0,0,0,0.4);

  --terminal-bg:      rgba(7, 3, 20, 0.9);
  --terminal-text:    #e8def7;
  --terminal-prompt:  #ddb7ff;

  --scrollbar-track:  rgba(21, 17, 34, 0.5);
  --scrollbar-thumb:  rgba(255,255,255,0.08);
}

/* ── Theme: High Contrast ─────────────────────────────────────────────────── */
[data-theme="high-contrast"] {
  --surface-0:        #000000;
  --surface-1:        #0a0a0a;
  --surface-2:        #111111;
  --surface-3:        #1a1a1a;
  --surface-4:        #222222;

  --text-primary:     #ffffff;
  --text-secondary:   #e0e0e0;
  --text-tertiary:    #b0b0b0;
  --text-disabled:    #555555;

  --accent:           #4fc3f7;
  --accent-hover:     #81d4fa;
  --accent-subtle:    rgba(79, 195, 247, 0.15);
  --accent-border:    rgba(79, 195, 247, 0.5);

  --success:          #69f0ae;
  --warning:          #ffff00;
  --error:            #ff5252;

  --border:           rgba(255,255,255,0.20);
  --border-strong:    rgba(255,255,255,0.40);

  --card-bg:          #0a0a0a;
  --card-border:      rgba(255,255,255,0.20);

  --input-bg:         #111111;
  --input-border:     rgba(255,255,255,0.30);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--surface-0);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--surface-0);
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cinematic bg video */
[data-theme="cinematic"] .cinematic-bg { display: block; }
.cinematic-bg { display: none; }

a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-hover); }

img, svg { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
h5 { font-size: 0.8125rem; font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.06em; }

p { color: var(--text-secondary); line-height: 1.7; }
code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--accent);
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary  { color: var(--text-tertiary) !important; }
.text-accent    { color: var(--accent) !important; }
.text-success   { color: var(--success) !important; }
.text-warning   { color: var(--warning) !important; }
.text-error     { color: var(--error) !important; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Selection ────────────────────────────────────────────────────────────── */
::selection { background: var(--accent-subtle); color: var(--text-primary); }