@import url('fonts.css');

/* ══════════════════════════════════════════════════════════════════════════
   ARCHE PFLEGEZENTRUM — Design-Tokens „Die Arche"
   CI-Farben des Kunden (Logo-Türkis #009BAA), zugespitzt aus dem Compiler-Rohentwurf.
   Single Source of Truth: Komponenten referenzieren NUR diese Variablen.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Feste Markenfarben — hell wie dunkel identisch (Lader, Tiefsee-Sektionen, Objekte) */
  --tuerkis-fix: #009BAA;
  --tiefsee-fix: #0A2E36;
  --tiefsee-2-fix: #0F3F4A;
  --koralle-fix: #E4664F;
  --gischt-fix: #EAF6F8;
  --weiss-fix: #FFFFFF;

  /* Rollen — der Dunkelmodus tauscht nur diese (Block html.dark unten) */
  --bg: #FFFFFF;
  --surface: #EAF6F8;          /* Gischt — getönte Fläche */
  --surface-2: #D5ECF0;        /* Linien, Rahmen, zweite Fläche */
  --card: #FFFFFF;
  --fg: #10262B;               /* Tinte */
  --muted: #3E5A60;            /* 6.9:1 auf Weiß */
  --line: #D5ECF0;
  --tuerkis: #009BAA;          /* Flächen, Knöpfe (Text darauf: Weiß, 3.6:1 groß / Tiefsee) */
  --tuerkis-tief: #00707C;     /* Akzent als Text auf Hell, 5.8:1 */
  --tuerkis-hell: #BFE7EC;
  --koralle: #E4664F;          /* warmer Akzent, Fläche */
  --koralle-tief: #B8442C;     /* Koralle als Text, 5.0:1 */
  --tiefsee: #0A2E36;
  --tiefsee-2: #0F3F4A;
  --auf-tiefsee: #E6EEF0;      /* Text auf Tiefsee */
  --auf-tiefsee-muted: #A9C0C5;

  --focus: #00707C;
  --icon-akzent: var(--tuerkis);

  --font-head: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluide Typo-Skala (REF-F, gedeckelt) */
  --text-eyebrow: .8rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.12rem, 1.4vw, 1.3rem);
  --text-h4: clamp(1.1rem, 1.3vw, 1.25rem);
  --text-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --text-h2: clamp(1.55rem, 3.2vw, 2.5rem);
  --text-h1: clamp(2.1rem, 4.6vw, 3.9rem);
  --lh-tight: 1.06; --lh-snug: 1.25; --lh-body: 1.6;
  --tracking-tight: -.02em; --tracking-label: .12em;

  /* Rhythmus */
  --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem;
  --r-sm: .6rem; --r: 1rem; --r-lg: 1.6rem; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(10 46 54 / .06);
  --shadow: 0 20px 50px -24px rgb(10 46 54 / .35);
  --mass: 65ch;

  /* Kurven (REF-C — abgelesen, nicht erfunden) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: .3s;
  /* Tempo aller Dauerschleifen: animation: x calc(6s * var(--tempo)) … — unter reduced motion 2.5
     (langsamer = gedämpft, nie abgeschaltet). Gilt auch für assets/seiten/*.css. */
  --tempo: 1;
}
@media (prefers-reduced-motion: reduce) { :root { --tempo: 2.5; } }
html.dark {
  --bg: #0B1F25;
  --surface: #12303A;
  --surface-2: #1B4350;
  --card: #173A45;
  --fg: #E6EEF0;
  --muted: #A9C0C5;
  --line: #24505B;
  --tuerkis: #2FC1CF;
  --tuerkis-tief: #7FDDE6;
  --tuerkis-hell: #1B4350;
  --koralle: #F08A75;
  --koralle-tief: #F5A695;
  --tiefsee: #061A1F;
  --tiefsee-2: #0C2A32;
  --focus: #7FDDE6;
  --shadow: 0 20px 50px -24px rgb(0 0 0 / .6);
}
html { color-scheme: light; }
html.dark { color-scheme: dark; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); }
h1, h2, h3, h4 { font-family: var(--font-head); }
/* Tailwind-Preflight setzt h1–h4 auf inherit — deshalb body-präfixiert überschreiben. */
body h1 { font-size: var(--text-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; text-wrap: balance; }
body h2 { font-size: var(--text-h2); line-height: 1.1; letter-spacing: var(--tracking-tight); font-weight: 700; text-wrap: balance; }
body h3 { font-size: var(--text-h3); line-height: var(--lh-snug); font-weight: 600; text-wrap: balance; }
body h4 { font-size: var(--text-h4); line-height: var(--lh-snug); font-weight: 600; }