/* ============================================================
   BASE — Tinte auf Pergament. Reset, Variablen, Atmosphäre.
   ============================================================ */

:root {
  /* Dark theme — "Midnight Ledger" */
  --bg:        #0E0D10;
  --bg2:       #15141A;
  --bg3:       #1D1C24;
  --bg-tint:   rgba(201, 168, 117, 0.04);
  --border:    rgba(244, 236, 224, 0.10);
  --border2:   rgba(244, 236, 224, 0.22);
  --hairline:  rgba(244, 236, 224, 0.06);
  --text:      #F4ECE0;
  --text2:     #B4A89B;
  --text3:     #6B6660;
  --ink:       #F4ECE0;

  /* Single editorial accent — warm brass */
  --accent:    #C9A875;
  --accent-2:  #E0BF8C;

  /* Restrained signal palette */
  --green:     #7FB069;
  --red:       #D26A5C;
  --amber:     #D9A441;
  --blue:      #7A95B6;
  --yellow:    #D9C441;
  --purple:    #A589B4;

  /* Typography */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Rhythm */
  --hair: 0.5px;

  /* Easing */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  /* Light theme — "Pressed Paper" */
  --bg:        #F1E8D9;
  --bg2:       #F7EFE0;
  --bg3:       #E6DBC6;
  --bg-tint:   rgba(142, 90, 45, 0.04);
  --border:    rgba(14, 13, 16, 0.14);
  --border2:   rgba(14, 13, 16, 0.30);
  --hairline:  rgba(14, 13, 16, 0.08);
  --text:      #1A1816;
  --text2:     #5C5853;
  --text3:     #8E8A82;
  --ink:       #1A1816;

  --accent:    #8E5A2D;
  --accent-2:  #B07640;

  --green:     #4F7A45;
  --red:       #A83B2C;
  --amber:     #A67318;
  --blue:      #3E5C7A;
  --yellow:    #8E6E15;
  --purple:    #6E5078;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "ss02", "cv11";
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-weight: 400;
  letter-spacing: -0.005em;
  position: relative;
  overflow-x: hidden;
}

/* Atmospheric paper grain — sehr feines Rauschen über allem */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

[data-theme="light"] body::before {
  opacity: 0.10;
  mix-blend-mode: multiply;
}

/* Weiche Vignette — gibt der Seite Tiefe */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, transparent 50%, rgba(0,0,0,0.20) 100%),
    radial-gradient(ellipse 70% 90% at 80% 100%, transparent 50%, var(--bg-tint) 100%);
}

[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, transparent 60%, rgba(142,90,45,0.06) 100%);
}

/* Eingangs-Choreografie */
@keyframes ledger-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ledger-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes accent-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Selektion */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Scrollbar — minimal */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border2);
}