/* teurepappe.de – Design Tokens (CI, siehe docs/00-branding.md)
   Einbindung: <link rel="stylesheet" href="tokens.css"> – Schriften liegen in ./fonts/ (WOFF2, lokal). */

@font-face { font-family: "Sora"; font-weight: 600; font-display: swap; src: url("../fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-display: swap; src: url("../fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 800; font-display: swap; src: url("../fonts/sora-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Farben */
  --tp-ink: #0A1226;        /* Tinte: dunkle Flächen, Text auf hell */
  --tp-navy: #14235A;       /* Marine: Verläufe, Hover auf dunkel */
  --tp-cobalt: #3D5AFE;     /* Kobalt: Buttons, Links, Fokus */
  --tp-mint: #27E0A3;       /* Mint: Markenakzent auf dunkel, steigende Werte */
  --tp-teal-deep: #0B7A62;  /* Tiefgrün: Text-Grün auf hell */
  --tp-coral: #FF6B78;      /* Koralle auf dunkel: fallende Werte */
  --tp-coral-deep: #C7303E; /* Koralle auf hell */
  --tp-ice: #C7D5FF;        /* Eis: Highlights auf dunkel */
  --tp-paper: #F5F7FC;      /* Papier: Seitenhintergrund */
  --tp-mist: #E3E8F3;       /* Nebel: Flächen, Linien */
  --tp-slate: #5A6785;      /* Schiefer: Sekundärtext auf hell */
  --tp-slate-light: #9AA8C7;/* Schiefer hell: Sekundärtext auf dunkel */

  /* Semantik */
  --tp-bg: var(--tp-paper);
  --tp-surface: #FFFFFF;
  --tp-text: var(--tp-ink);
  --tp-text-muted: var(--tp-slate);
  --tp-border: var(--tp-mist);
  --tp-link: var(--tp-cobalt);
  --tp-up: var(--tp-teal-deep);
  --tp-down: var(--tp-coral-deep);

  /* Typografie */
  --tp-font-heading: "Sora", system-ui, sans-serif;
  --tp-font-body: "Inter", system-ui, sans-serif;
  --tp-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Form */
  --tp-radius: 8px;
  --tp-radius-sm: 6px;
  --tp-transition: 200ms ease;
}

/* Dunkle Bereiche (Header, Footer, Hero): Tokens umkehren */
.tp-dark {
  --tp-bg: var(--tp-ink);
  --tp-surface: var(--tp-navy);
  --tp-text: var(--tp-paper);
  --tp-text-muted: var(--tp-slate-light);
  --tp-border: #23346F;
  --tp-link: var(--tp-ice);
  --tp-up: var(--tp-mint);
  --tp-down: var(--tp-coral);
}

body { background: var(--tp-bg); color: var(--tp-text); font-family: var(--tp-font-body); line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--tp-font-heading); line-height: 1.15; letter-spacing: -0.015em; }
.tp-num { font-family: var(--tp-font-mono); font-variant-numeric: tabular-nums; }
.tp-up::before { content: "▲ "; color: var(--tp-up); }
.tp-down::before { content: "▼ "; color: var(--tp-down); }