/* dennis-guse.de — Design-Tokens (aus tokens.json). Zwei Themes: Papier (hell), Platine (dunkel). */
:root {
  --paper: #f3f0e8; --paper-raised: #fbf9f4; --paper-sunk: #e8e4d8;
  --ink: #1c1d1a; --ink-muted: #5b5a52;
  --line: #d6d0c0; --line-strong: #827e6e; --dot: #c9c2ae;
  --filament: #c2410c; --on-filament: #ffffff; --filament-ink: #a8380a;
  --solder: #1d5c3a; --on-solder: #fbf9f4;
  --copper: #8f5524; --warn: #8a5a00; --focus: var(--filament);

  --shadow-1: 0 1px 1px rgba(58,44,22,.05), 0 4px 10px rgba(58,44,22,.08), 0 16px 32px -8px rgba(58,44,22,.16);
  --shadow-2: 0 2px 2px rgba(58,44,22,.05), 0 10px 20px rgba(58,44,22,.10), 0 28px 48px -10px rgba(58,44,22,.24);
  --shadow-btn: 0 1px 2px rgba(58,44,22,.12), 0 3px 8px rgba(58,44,22,.08);
  --shadow-btn-primary: 0 1px 2px rgba(58,44,22,.2), 0 6px 16px -3px rgba(194,65,12,.55);

  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-24: 96px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 999px;
  --grid-pitch: 10px; --prose-max: 68ch; --border-width: 1px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121411; --paper-raised: #1b1e1a; --paper-sunk: #0c0d0b;
    --ink: #ebe7dc; --ink-muted: #a3a092;
    --line: #2c302a; --line-strong: #6b7265; --dot: #262a24;
    --filament: #f2783a; --on-filament: #141310; --filament-ink: #f59a6a;
    --solder: #4cc185; --on-solder: #0c0d0b;
    --copper: #d6955a; --warn: #e0b040;

    --shadow-1: 0 1px 1px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.45), 0 18px 36px -8px rgba(0,0,0,.6);
    --shadow-2: 0 2px 2px rgba(0,0,0,.5), 0 12px 24px rgba(0,0,0,.55), 0 30px 56px -10px rgba(0,0,0,.7);
    --shadow-btn: 0 1px 2px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4);
    --shadow-btn-primary: 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -3px rgba(242,120,58,.5);
  }
}