/* Shutdown / Tauschke — Design-Tokens, übernommen aus dem Shutdown-Design-System. */

/* ---- Schriften · Projekt-Webfonts (Subsets aus dem Entwurf) ---- */
@font-face{font-family:"Lora";src:url("../assets/fonts/Lora.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../assets/fonts/Caveat.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
/* ---- Papier & Tinte · hell, Website + Präsentation ---- */
--paper:#FBF8F3;--paper-2:#F3EEE4;--paper-3:#E8E1D3;
--ink:#1E1A16;--ink-2:#4A4238;--ink-3:#8A7F72;--ink-line:#D8CFBE;
/* ---- Marke ---- */
--sage:#6B8E6A;--sage-dark:#4E6D4E;--sage-soft:#CBD7C6;--sage-wash:#EEF2EB;
--terracotta:#C8684A;--terracotta-dark:#9E4C30;--terracotta-light:#E09A80;
--sand:#D9B77A;--sand-soft:#F2E5C8;
/* ---- App · dark-first ---- */
--app-bg:#14100D;
--app-raise:#1E1A16;
--app-raise-soft:rgba(251,248,243,.05);
--app-line:rgba(251,248,243,.10);
--app-line-soft:rgba(251,248,243,.08);
--app-fg:#FBF8F3;
--app-fg-2:rgba(251,248,243,.62);
--app-fg-3:rgba(251,248,243,.42);
--app-fg-4:rgba(251,248,243,.22);
--app-sage:#9DB598;
--app-bezel:#241E18;
/* ---- Bildsprache Kaiserberg · Hügel-Ebenen fern → nah ---- */
--hill-1:#CBD7C6;--hill-2:#9DB598;--hill-3:#6B8E6A;--hill-4:#4E6D4E;
--sky-night-1:#38302A;--sky-night-2:#262019;--sky-night-3:#1A1512;
--sky-dusk-1:#6E4A38;--sky-dusk-2:#463127;--sky-dusk-3:#251C16;
--sky-gold-1:#57452E;--sky-gold-2:#332921;--sky-gold-3:#1E1813;

/* ---- Typografie ---- */
--serif:"Lora","Cormorant Garamond",Georgia,serif;
--sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--script:"Caveat","Segoe Script",cursive;
--mono-num:ui-monospace,Consolas,monospace;

--ls-hero:-.02em;
--ls-heading:-.01em;
--ls-eyebrow:.18em;
--ls-label:.16em;
--ls-ui:.02em;

--type-tile:400 19px/1.25 var(--serif);

/* ---- Abstände / App-Layout ---- */
--app-gutter:20px;
--app-status-h:44px;
--app-tabbar-h:78px;
--app-content-h:704px;
--app-width:390px;
--app-height:844px;
--page-gutter:32px;
--prose-max:640px;

/* ---- Radien ---- */
--r-xs:8px;      /* Felder, Buttons, Suche */
--r-sm:10px;     /* kleine Thumbs */
--r-md:12px;     /* Bibliotheks-Thumb, Player-Action */
--r-lg:14px;     /* Karten, Kacheln, Serien */
--r-xl:22px;     /* Sheet oben (App) */
--r-2xl:24px;    /* Sheet oben (Papier) */
--r-icon:22px;   /* App-Icon 96px+ */
--r-icon-sm:13px;/* App-Icon 56px */
--r-screen:44px; /* Screen-Ecken im Rahmen */
--r-bezel:56px;  /* Telefonrahmen */
--r-pill:999px;

/* ---- Schatten · warm aus --ink, nie neutrales Schwarz ---- */
--shadow-2:0 4px 12px rgba(30,26,22,.06),0 1px 3px rgba(30,26,22,.04);
--shadow-3:0 12px 32px rgba(30,26,22,.10),0 2px 8px rgba(30,26,22,.05);
--shadow-bezel:0 12px 32px rgba(30,26,22,.10),0 2px 8px rgba(30,26,22,.05),0 30px 70px rgba(30,26,22,.18);
--shadow-sheet:0 -14px 40px rgba(0,0,0,.40);
--shadow-action:0 6px 18px rgba(200,104,74,.30);
--shadow-action-lg:0 10px 30px rgba(200,104,74,.35);

/* ---- Schutzverläufe über Bildern ---- */
--scrim-tile:linear-gradient(to bottom,rgba(20,16,13,0) 38%,rgba(20,16,13,.86) 100%);
--scrim-series:linear-gradient(to bottom,rgba(20,16,13,.05) 30%,rgba(20,16,13,.88) 100%);
--scrim-player:linear-gradient(to bottom,rgba(20,16,13,.28) 0%,rgba(20,16,13,.45) 42%,#14100D 92%);
--blur-tabbar:blur(8px);

/* ---- Farbrollen — verbindlich: Terracotta nur Handlung, Sand nur Fortschritt, Sage nur ruhige Zustände ---- */
--action:var(--terracotta);
--action-press:var(--terracotta-dark);
--action-fg:#fff;
--progress:var(--sand);
--calm:var(--app-sage);
--calm-wash:rgba(157,181,152,.14);
--calm-line:rgba(157,181,152,.38);
--calm-line-strong:rgba(157,181,152,.50);
--action-wash:rgba(200,104,74,.13);
--action-line:rgba(200,104,74,.40);
}