@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&display=swap');

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

:root {
  --bg:            #16161d;
  --bg-surface:    #1c1c25;
  --bg-elevated:   #22222e;
  --border:        #2e2e3d;
  --text-primary:  #eceae4;
  --text-muted:    #b8b4be;
  --text-faint:    #6a6675;
  --accent:        #c8bfae;
  --accent-glow:   #c8bfae18;
  --brand:         #9710C2;
  --brand-mid:     #b520e0;
  --brand-dim:     #9710C218;
  --brand-border:  #9710C240;
  --brand-glow:    #9710C230;
  --white-logo:    #ffffff;
  --warn-bg:            #1c1508;
  --warn-border:        #4a3318;
  --warn-text:          #d08040;
  --badge-green-bg:     #16301e;
  --badge-green-text:   #5ecc7d;
  --badge-green-border: #2a4f35;
  --badge-orange-bg:    #2e2010;
  --badge-orange-text:  #d08040;
  --badge-orange-border:#4a3318;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     14px;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --font-display:  'Cinzel', serif;
  --font-body:     'Spectral', serif;
  --transition:    150ms var(--ease-out);
}

[data-theme="light"] {
  --bg:            #f2ede4;
  --bg-surface:    #e8e2d8;
  --bg-elevated:   #ddd7cc;
  --border:        #ccc5b9;
  --text-primary:  #111118;
  --text-muted:    #3d3830;
  --text-faint:    #857d75;
  --accent:        #4a3f35;
  --accent-glow:   #4a3f3518;
  --brand:         #7a0a99;
  --brand-mid:     #9710C2;
  --brand-dim:     #9710C212;
  --brand-border:  #9710C235;
  --brand-glow:    #9710C225;
  --white-logo:    #1a1a22;
  --warn-bg:            #fdf3e7;
  --warn-border:        #ddb06a;
  --warn-text:          #995010;
  --badge-green-bg:     #eaf5ee;
  --badge-green-text:   #1a6b2e;
  --badge-green-border: #b0d9bc;
  --badge-orange-bg:    #fdf0e0;
  --badge-orange-text:  #995010;
  --badge-orange-border:#ddb06a;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: var(--brand-dim); color: var(--text-primary); }

a { color: var(--brand-mid); text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.8; }

code, pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875rem;
}

pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  line-height: 1.6;
  color: var(--text-primary);
}

code:not(pre code) {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.45em;
  font-size: 0.85em;
  color: var(--brand-mid);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}