:root {
  --red:       #C8102E;
  --red-deep:  #A00D26;
  --red-glow:  #E4162F;
  --ink:       #0A0A0A;
  --paper:     #F5F2ED;
  --paper-2:   #EDE8E0;
  --paper-3:   #E2DCD0;
  --line:      rgba(10,10,10,0.12);
  --muted:     rgba(10,10,10,0.56);
  --bg:        var(--paper);
  --surface:   #FFFFFF;
  --fg:        var(--ink);
  --chip:      rgba(10,10,10,0.05);
}
[data-theme="dark"] {
  --ink:       #F2EDE4;
  --paper:     #0B0A0C;
  --paper-2:   #141316;
  --paper-3:   #1C1B1F;
  --line:      rgba(242,237,228,0.12);
  --muted:     rgba(242,237,228,0.58);
  --bg:        var(--paper);
  --surface:   #121114;
  --fg:        var(--ink);
  --chip:      rgba(242,237,228,0.06);
  --red:       #E4162F;
  --red-deep:  #B80D22;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.6s ease, color 0.6s ease;
}
::selection { background: var(--red); color: #fff; }
.display { font-family: 'Anton', 'Inter Tight', sans-serif; letter-spacing: 0.01em; line-height: 0.92; text-transform: uppercase; }
.mono { font-family: 'JetBrains Mono', monospace; }
.grain::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.35; mix-blend-mode: multiply;
}
[data-theme="dark"] .grain::before { mix-blend-mode: screen; opacity: 0.18; }
#root { position: relative; z-index: 2; }