@import url('fonts.css');

/* ══════════════════════════════════════════════════════════════════════════
   NOAH Tagespflege — Design-Tokens (BAUAUFTRAG §2.3 / §2.6 / §7)
   Alle Design-Werte stehen HIER. Abgeleitete Töne entstehen per color-mix()
   aus den sechs Grundfarben — im ganzen Projekt kein weiterer Hex-Wert.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Die sechs Farben (BAUAUFTRAG 2.3, Herkunft: CSS der bestehenden Kundenseite) ── */
  --c-grund:      #faf6f7;   /* oklch(.976 .004 360) · Seitengrund, Lesesektionen   ~60 % */
  --c-bordeaux:   #7c1e3a;   /* oklch(.397 .129 7.7) · Marke, CTA, Signet           ~10 % */
  --c-tief:       #4e0f22;   /* oklch(.287 .094 7.5) · dunkle Sektionen, Footer     ~20 % */
  --c-anthrazit:  #382f2d;   /* oklch(.314 .014 32.6) · Fließtext                    Text */
  --c-rosegrau:   #e8d9dc;   /* oklch(.898 .017 3.7) · Karten, Rahmen, Ruheflächen   ~8 % */
  --c-salbei:     #3f7d6e;   /* oklch(.544 .069 175.9) · Aktivierung, Garten         ~2 % */
  /* Salbei erreicht auf --c-grund nur 4,48:1 → als FLIESSTEXT nie. Dafür die dunklere Stufe: */
  --c-salbei-text: #2f6053;  /* 6,71:1 auf --c-grund */

  /* ── Abgeleitete Flächen (color-mix, keine neuen Hex) ── */
  --c-flaeche:       color-mix(in oklch, var(--c-grund) 100%, transparent);
  --c-karte:         color-mix(in oklch, var(--c-grund) 82%, #fff);
  --c-karte-rand:    color-mix(in oklch, var(--c-rosegrau) 78%, var(--c-bordeaux));
  --c-trenn:         color-mix(in oklch, var(--c-rosegrau) 60%, var(--c-grund));
  --c-text-leise:    color-mix(in oklch, var(--c-anthrazit) 72%, var(--c-grund));
  --c-bordeaux-hover: color-mix(in oklch, var(--c-bordeaux) 84%, var(--c-tief));
  --c-tief-auf:      color-mix(in oklch, var(--c-tief) 88%, var(--c-bordeaux));
  --c-auf-tief-leise: color-mix(in oklch, #fff 78%, var(--c-rosegrau));
  --c-rand-auf-tief: color-mix(in oklch, var(--c-rosegrau) 28%, transparent);
  --focus:           var(--c-bordeaux);

  /* Schrift AUF einer Markenfläche (Knopf, Schritt-Ziffer, aktive Wahl).
     Ein Token statt einer .dark-Ausnahme je Bauteil — so stimmt der Kontrast
     in BEIDEN Fassungen, ohne dass irgendwo eine Regel nachgezogen werden muss. */
  --c-auf-marke:     #ffffff;

  /* Töne, die NICHT mitdrehen: sie sitzen immer auf --c-tief-Sektionen, und die
     sind in beiden Fassungen dunkel. Ein gedrehter Wert wäre dort unlesbar. */
  --c-fest-hell:     #ffffff;
  --c-fest-rose:     #e8d9dc;
  --c-fest-tief:     #4e0f22;
  --c-fest-bordeaux: #7c1e3a;   /* Fußzeile: die Markenfarbe der Altseite, nicht das tiefe Weinrot */

  /* ── Der Tagesbogen (Sonne, Himmel, Garten) — ersetzt seit 21.09.2026 die Wasser-Motive ── */
  --c-sonne:       #e9b872;   /* warmes Gold, nur als Fläche/Licht, nie als Schrift */
  --c-sonne-hell:  #f8e2b8;
  --c-himmel-frueh: #f6ddd9;  /* Morgen: Rosé */
  --c-himmel-tag:   #fbf4ef;  /* Mittag: fast weiß, warm */
  --c-himmel-spaet: #f7dcc0;  /* Nachmittag: Gold */
  --c-garten:       #cfe0d8;  /* Salbei, stark aufgehellt */
  --c-garten-fern:  #ead9dc;  /* ferner Hügel: Rosé-Grau */
  --c-blush:        color-mix(in oklch, var(--c-bordeaux) 7%, var(--c-grund));  /* helle Akzent-Sektion */

  /* ── Form-Sprache (2.6) ── */
  --radius-sm: .375rem;
  --radius:    .75rem;
  --radius-lg: 1.25rem;
  --bogen-oben: 50% 50% var(--radius-lg) var(--radius-lg) / 22% 22% var(--radius-lg) var(--radius-lg);
  --shadow-sm: 0 1px 2px rgb(56 47 45 / .06);
  --shadow:    0 8px 30px rgb(78 15 34 / .12);
  --shadow-lg: 0 18px 48px rgb(78 15 34 / .18);

  /* ── Typo-Skala (2.6 · harter H1-Deckel 3,5rem) ── */
  --font-h: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --font-b: 'Mulish', -apple-system, 'Segoe UI', sans-serif;
  --text-h1:    clamp(2rem, 5vw, 3.5rem);
  --text-h2:    clamp(1.6rem, 3.4vw, 2.5rem);
  --text-h3:    clamp(1.25rem, 2vw, 1.55rem);
  --text-body:  1.125rem;   /* bewusst angehoben — Leserschaft Gäste 75+, Angehörige 45+ */
  --text-klein: .9375rem;
  --text-mini:  .8125rem;   /* funktionaler Text nie unter 11 px */

  /* ── Raum ── */
  --sp-sektion: clamp(4rem, 9vw, 7.5rem);
  --sp-block:   clamp(2rem, 4vw, 3.5rem);
  --breite:     75rem;
  --breite-text: 44rem;

  /* ── Kurven & Dauern (§7) ── */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --d-mikro:  120ms;   /* Knopf-Rückmeldung */
  --d-bedien: 200ms;   /* Akkordeon, Panels — Bedien-Animationen < 300 ms */
  --d-wisch:  280ms;   /* Seitenübergang */

  /* ── Z-Index ── */
  --z-buehne: 1;
  --z-header: 60;
  --z-overlay: 70;
  --z-sub: 80;
  --z-wisch: 95;
  --z-lade: 9999;

  /* Für den Header-Baustein (Vorlage) */
  --color-bg: var(--c-grund);
  --color-fg: var(--c-anthrazit);
  --color-brand: var(--c-bordeaux);
}

/* ══════════════════════════════════════════════════════════════════════════
   Gedämpfte Fassung (22.09.2026: kein Fast-Schwarz — Marcus: „zu Gothic"; 23.09.2026 eine
   Stufe heller: „immer noch zu extrem dunkel"). Ein mittlerer Zwischenton, nur etwas
   augenschonender als die helle Fassung: warmes Rosé-Taupe.
   Gedreht werden nur die Flächen, die Marke wird ein sanftes Altrosa. Kein reines
   Schwarz, kein reines Weiß (REF-F §Light/Dark).
   ══════════════════════════════════════════════════════════════════════════ */
.dark {
  --c-grund:      #5f4f56;   /* mittleres Rosé-Taupe — gedimmt, nicht dunkel */
  --c-bordeaux:   #f7ced8;
  --c-tief:       #54454b;
  --c-anthrazit:  #f7eef0;
  --c-rosegrau:   #6f5b63;
  --c-salbei:     #86c6b5;
  --c-salbei-text: #b4e3d6;

  --c-karte:         color-mix(in oklch, var(--c-grund) 95%, #fff);
  --c-karte-rand:    color-mix(in oklch, var(--c-rosegrau) 70%, var(--c-bordeaux));
  --c-trenn:         color-mix(in oklch, var(--c-rosegrau) 70%, var(--c-grund));
  --c-text-leise:    color-mix(in oklch, var(--c-anthrazit) 84%, var(--c-grund));
  --c-bordeaux-hover: color-mix(in oklch, var(--c-bordeaux) 86%, #fff);
  --c-tief-auf:      color-mix(in oklch, var(--c-tief) 82%, var(--c-bordeaux));
  --c-auf-tief-leise: color-mix(in oklch, #fff 74%, var(--c-rosegrau));
  --c-rand-auf-tief: color-mix(in oklch, var(--c-rosegrau) 60%, transparent);
  --focus:           var(--c-bordeaux);
  /* Die Marke ist hier ein helles Rosé — die Schrift darauf muss dunkel werden. */
  --c-auf-marke:     #2e2226;
  --c-himmel-frueh: #6c575e;
  --c-himmel-tag:   #66545b;
  --c-himmel-spaet: #735b5a;
  --c-garten:       #53706a;
  --c-garten-fern:  #6c5760;
  --c-sonne-hell:   #f0cf94;
  --c-blush:        color-mix(in oklch, var(--c-rosegrau) 55%, var(--c-grund));

  --shadow-sm: 0 1px 2px rgb(30 18 22 / .22);
  --shadow:    0 8px 30px rgb(30 18 22 / .28);
  --shadow-lg: 0 18px 48px rgb(30 18 22 / .34);

  --color-bg: var(--c-grund);
  --color-fg: var(--c-anthrazit);
  --color-brand: var(--c-bordeaux);
}