/* ERZEUGT AUS DEM PRODUKTIONS-HANDOFF — nicht von Hand aendern.
 *
 * Quelle: design/HANDOFF.md (§11 App-Palette, §12 Schriften) und das dort
 * gebundene Designsystem unter design/_ds/. Erzeugt von
 * scripts/tokens-erzeugen.js, Tabelle in design/tokens.json.
 * Wer hier einen Wert aendert, aendert ihn bis zum naechsten Lauf — danach
 * steht wieder der Wert des Handoffs da. Stimmt ein Wert nicht, wird der
 * HANDOFF korrigiert (Designspec Kap. 9 und Kap. 11 Punkt 4).
 */
:root {
  --font-heading: 'Rokkitt', serif; /* Ueberschriften (§12 display) */
  --font-body: 'Karla', sans-serif; /* Fliesstext (§12 body) */
  --gewicht-heading: 700; /* Gewicht aller Ueberschriften (§12 Tabelle, Spalte Weight) */
  --schrift-h1: 42px; /* Groesse h1 */
  --schrift-h2: 32px; /* Groesse h2 */
  --schrift-h3: 25px; /* Groesse h3 */
  --schrift-h4: 20px; /* Groesse h4 */
  --schrift-h5: 16px; /* Groesse h5 */
  --schrift-h6: 13px; /* Groesse h6 */
  --schrift-fliess: 15px; /* Groesse des Fliesstextes */
  --zeilenhoehe-fliess: 1.55; /* Zeilenhoehe des Fliesstextes */
  --zeilenhoehe-heading: 1.12; /* Zeilenhoehe der Ueberschriften */
  --laufweite-heading: -0.015em; /* Laufweite der Ueberschriften */
  --laufweite-versal: 0.08em; /* Laufweite in Versalien (h6) */
  --color-accent: #c67139; /* Terracotta — die einzige Aktionsfarbe */
  --color-accent-2: #7a8a5e; /* Zweitfarbe des Designsystems */
  --color-bg: #f5ead8; /* Papiergrund im Druck — auf dem Bildschirm gilt §11 (dunkel-only) */
  --color-neutral-100: #f9f4ed; /* Neutralrampe 100 */
  --color-neutral-200: #eee7db; /* Neutralrampe 200 */
  --color-neutral-300: #dcd3c4; /* Neutralrampe 300 */
  --color-neutral-400: #c0b6a5; /* Neutralrampe 400 */
  --color-neutral-500: #a19786; /* Neutralrampe 500 */
  --color-neutral-600: #82796a; /* Neutralrampe 600 */
  --color-neutral-700: #645c50; /* Neutralrampe 700 */
  --color-neutral-800: #474238; /* Neutralrampe 800 */
  --color-neutral-900: #2e2b25; /* Neutralrampe 900 */
  --color-accent-100: #fff2eb; /* Akzentrampe 100 */
  --color-accent-200: #ffe1d0; /* Akzentrampe 200 */
  --color-accent-300: #ffc6a5; /* Akzentrampe 300 */
  --color-accent-400: #f6a06b; /* Akzentrampe 400 */
  --color-accent-500: #d67f48; /* Akzentrampe 500 */
  --color-accent-600: #b2622d; /* Akzentrampe 600 */
  --color-accent-700: #8c491a; /* Akzentrampe 700 */
  --color-accent-800: #643312; /* Akzentrampe 800 */
  --color-accent-900: #402310; /* Akzentrampe 900 */
  --color-accent-2-100: #f0fae1; /* Zweitrampe 100 */
  --color-accent-2-200: #e1eecc; /* Zweitrampe 200 */
  --color-accent-2-300: #ccdbb2; /* Zweitrampe 300 */
  --color-accent-2-400: #aebf92; /* Zweitrampe 400 */
  --color-accent-2-500: #8fa073; /* Zweitrampe 500 */
  --color-accent-2-600: #728157; /* Zweitrampe 600 */
  --color-accent-2-700: #56633f; /* Zweitrampe 700 */
  --color-accent-2-800: #3d472b; /* Zweitrampe 800 */
  --color-accent-2-900: #272e1b; /* Zweitrampe 900 */
  --space-1: 4.4px; /* Abstand 1 */
  --space-2: 8.8px; /* Abstand 2 */
  --space-3: 13.2px; /* Abstand 3 */
  --space-4: 17.6px; /* Abstand 4 */
  --space-6: 26.4px; /* Abstand 6 */
  --space-8: 35.2px; /* Abstand 8 */
  --radius-sm: 8px; /* Radius sm */
  --radius-md: 16px; /* Radius md */
  --radius-lg: 28px; /* Radius lg */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent); /* Schatten sm */
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent); /* Schatten md */
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent); /* Schatten lg */
  --radius-karte: calc(var(--radius-lg) * 1.15); /* Rundung von Karte und Dialog */
  --radius-pille: 999px; /* Rundung von Knopf, Tag, Segment und Feld */
  --cs-bg-top: #221e18; /* ground & surfaces */
  --cs-bg-bottom: #171410; /* ground & surfaces */
  --cs-bg: linear-gradient(180deg, #221e18 0%, #171410 100%); /* ground & surfaces */
  --cs-bg-stage: radial-gradient(ellipse 85% 50% at 50% 40%, #2e2a22, #1c1914 58%, #141210); /* ground & surfaces */
  --cs-bg-reveal: radial-gradient(ellipse 90% 55% at 50% 40%, #3a3226, #221e18 55%, #171410); /* ground & surfaces */
  --cs-bg-win: radial-gradient(ellipse 85% 45% at 50% 38%, #2c3226, #1b1a14 58%, #141210); /* ground & surfaces */
  --cs-surface: #2b261f; /* sheets, dialogs */
  --cs-surface-card: linear-gradient(165deg, #2b2e36 0%, #22242b 60%, #1b1d23 100%); /* ground & surfaces */
  --cs-surface-photo: linear-gradient(155deg, #2f3339, #1e2126); /* ground & surfaces */
  --cs-tile: #22242b; /* ground & surfaces */
  --cs-scrim: rgba(19, 17, 16, .70); /* delete / disconnect */
  --cs-scrim-soft: rgba(19, 17, 16, .66); /* filter sheet */
  --cs-fill-1: rgba(245, 234, 216, .05); /* fills & hairlines */
  --cs-fill-2: rgba(245, 234, 216, .08); /* fills & hairlines */
  --cs-line-1: rgba(245, 234, 216, .10); /* fills & hairlines */
  --cs-line-2: rgba(245, 234, 216, .14); /* fills & hairlines */
  --cs-line-3: rgba(245, 234, 216, .22); /* fills & hairlines */
  --cs-line-4: rgba(245, 234, 216, .30); /* fills & hairlines */
  --cs-text: #f5ead8; /* text */
  --cs-text-2: #cfc3ab; /* text */
  --cs-text-3: #d8ccb8; /* text */
  --cs-text-mute: #b5a992; /* text */
  --cs-label: #a89c88; /* uppercase section labels */
  --cs-text-dim: #8d8272; /* text */
  --cs-text-off: #5f594e; /* disabled deck sizes */
  --cs-on-accent: #f9f4ed; /* text */
  --cs-accent: #c67139; /* action */
  --cs-accent-300: #f6a06b; /* action */
  --cs-accent-glow: rgba(198, 113, 57, .50); /* action */
  --cs-accent-tint: rgba(198, 113, 57, .14); /* action */
  --cs-accent-disabled: rgba(198, 113, 57, .35); /* action */
  --cs-good: #a4c76b; /* status */
  --cs-good-soft: #c8dba2; /* status */
  --cs-good-tint: rgba(164, 199, 107, .12); /* status */
  --cs-warn: #e89a5e; /* status */
  --cs-warn-tint: rgba(232, 154, 94, .16); /* status */
  --cs-epic-soft: #e6cbf9; /* conquest copy */
  --cs-conquered: rgba(201, 138, 245, .90); /* EROBERT chip fill */
  --cs-conquered-ink: #231a2b; /* status */
  --cs-r-common: #b8ad9c; /* rarity — the only source of rarity colour */
  --cs-r-common-dark: #3f3b36; /* rarity — the only source of rarity colour */
  --cs-r-common-rgb: 184, 173, 156; /* rarity — the only source of rarity colour */
  --cs-r-uncommon: #a4c76b; /* rarity — the only source of rarity colour */
  --cs-r-uncommon-dark: #56633f; /* rarity — the only source of rarity colour */
  --cs-r-uncommon-rgb: 164, 199, 107; /* rarity — the only source of rarity colour */
  --cs-r-rare: #6ab6f0; /* rarity — the only source of rarity colour */
  --cs-r-rare-dark: #3a5a77; /* rarity — the only source of rarity colour */
  --cs-r-rare-rgb: 106, 182, 240; /* rarity — the only source of rarity colour */
  --cs-r-epic: #c98af5; /* rarity — the only source of rarity colour */
  --cs-r-epic-dark: #6b4d79; /* rarity — the only source of rarity colour */
  --cs-r-epic-rgb: 201, 138, 245; /* rarity — the only source of rarity colour */
  --cs-r-legendary: #ffb545; /* rarity — the only source of rarity colour */
  --cs-r-legendary-dark: #b0741c; /* rarity — the only source of rarity colour */
  --cs-r-legendary-rgb: 255, 181, 69; /* rarity — the only source of rarity colour */
  --cs-back: linear-gradient(165deg, #c67139, #9d5527); /* card back */
  --cs-back-edge: #f9f4ed; /* card back */
  --cs-shadow-sheet: 0 12px 32px rgba(0, 0, 0, .50); /* elevation */
  --cs-shadow-card: 0 24px 50px rgba(0, 0, 0, .55); /* elevation */
  --cs-shadow-card-l: 0 26px 56px rgba(0, 0, 0, .60); /* elevation */
  --cs-shadow-back: 0 16px 34px rgba(0, 0, 0, .50); /* elevation */
  --cs-glow-btn: 0 0 18px rgba(198, 113, 57, .50); /* elevation */
}