/* Design Tokens der Website R-A „Materialkiste“ (docs/06 Kap. 2/3). EINE Quelle: Diese Datei gehört zur
   Website-Vorlage (cms/template) und wird von der Redaktion (cms/editor/src/main.tsx) mitgeladen.
   Zwei Ebenen:
   1. Grundwerte auf :root (--p-* Farben, --sp-* Abstände, Bewegung, Schriftfamilien). Enthalten ist nur, was die
      Website braucht; die Redaktion ergänzt ihre eigenen Werte in cms/editor/src/styles/tokens.css.
   2. Semantik und Rollen auf .site (--color-*, --illu-*, --site-*). site.css und illustration.css greifen
      nur auf Ebene 2 und auf --sp-*, --dur-*, --ease*, --target zu.
   Nur hell (kein Dark Mode). Kaskadenschichten: siehe site-base.css. */
@layer tokens {
  :root {
    color-scheme: light;

    /* ---- 1. Grundwerte ---------------------------------------------------------------------- */
    --p-white: #ffffff;
    --p-wood-400: #c9a16d;
    --p-warm-0: #fffcf7;       /* Warmweiß: Website-Grund */
    --p-maple-150: #efe8dd;    /* Ahorn kräftiger: neutrale Fläche der Website (hebt sich vom Warmweiß ab) */
    --p-maple-200: #e9e3da;    /* dekorative Linie */
    --p-slate-900: #2b2a33;    /* Tinte, leicht kühl */
    --p-slate-600: #5e5b66;    /* Schiefer: gedämpfter Text */
    --p-blue-700: #1a3f80;     /* Tiefblau: Hover */
    --p-blue-600: #2353a3;     /* Zahlenstangen-Blau: Links, Button, Fokus */
    --p-sky-100: #dce8f7;      /* Himmel-Fläche */
    --p-sky-300: #a9c5ea;      /* Himmel kräftig, nur Illustration */
    --p-gold-50: #fdf0d2;      /* Perlengold-Fläche */
    --p-gold-200: #fbe3a6;     /* heller Gold-Footer */
    --p-gold-500: #f2b33d;     /* Perlengold, nur Illustration */
    --p-pink-100: #f9dde7;     /* Turmrosa-Fläche */
    --p-pink-200: #f2c2d4;     /* Turmrosa kräftiger: Grund der Illustration auf der Rosa-Fläche */
    --p-sky-200: #c2d6f0;      /* Himmel kräftiger: Grund der Illustration auf der Himmel-Fläche */
    --p-pink-500: #e3007d;     /* Logo-Magenta, nur Grafik (>= 3:1) */
    --p-wood-50: #f3e4cf;      /* Holz-Fläche: Bildgründe, Datumsmarken */
    --p-wood-text: #7a5a32;    /* Holz als Text (6,15:1) */
    --p-leaf-400: #8fb47f;     /* Blattgrün, nur Illustration */
    /* Figuren der Illustrationen (Vielfalt, ohne Gesichter): Haar- und Hauttöne, nur Grafik */
    --p-hair-blond: #e2bd6e;
    --p-hair-red: #c4602f;
    --p-hair-brown: #6e4a2f;
    --p-hair-black: #2b2a33;
    --p-hair-grey: #b4afb8;
    --p-skin-1: #f4d4bd;
    --p-skin-2: #deaa82;
    --p-skin-3: #b47b52;
    --p-skin-4: #7b4f33;

    /* Schrift: Figtree für Text, Bricolage Grotesque nur für Überschriften (fonts.css) */
    --font-ui: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'Figtree Variable', system-ui, sans-serif;

    /* Abstände (4er-Raster) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 5rem;

    --r-pill: 999px;

    /* Bewegung: weich wie Holzmaterial, nichts federt. 120 Rückmeldung · 200 kleine Wege · 320 Aufklappen/Menü.
       Öffnen mit --ease-out-soft (kommt an), Schließen mit --ease-exit (geht weg). */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-exit: cubic-bezier(0.32, 0, 0.67, 0);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --ease: var(--ease-out-soft);

    --target: 2.75rem;      /* 44 px Mindestziel */
  }

  @media (prefers-reduced-motion: reduce) {
    /* Bewegung wird zu kurzem Überblenden, Wege sofort (site.css schaltet Animationen ganz ab). */
    :root { --dur-2: 120ms; --dur-3: 120ms; }
  }

  /* ---- 2. Semantik und Rollen der Website (--color-*, --illu-*, --site-*), Theme .site -------- */
  .site {
    /* R-A „Materialkiste“ (06 Kap. 3.2). Kontraste auf --color-bg: Text 13,85 · gedämpft 6,48 · Akzent 7,23;
       Weiß auf Akzent 7,40. Nebenfarben nur als helle Flächen mit Tinte darauf, nie als Text oder Button. */
    --color-bg: var(--p-warm-0);
    --color-surface: var(--p-maple-150);
    --color-text: var(--p-slate-900);
    --color-text-muted: var(--p-slate-600);
    --color-line: var(--p-maple-200);
    --color-accent: var(--p-blue-600);        /* Links, eine Hauptaktion, Fokus */
    --color-accent-strong: var(--p-blue-700);
    --color-accent-tint: var(--p-sky-100);
    --color-on-accent: var(--p-white);
    --color-brand: var(--p-pink-500);         /* Logo-Magenta: nur Grafik (Wortmarke, Turm) */
    --color-wood-text: var(--p-wood-text);
    /* Flächenrollen: Gold = Einladung (Seitenköpfe Alltag/Kontakt, Kennenlernen, Adresse, Fuß; kräftig nur Platzstatus und Fuß) ·
       Rosa = Pädagogik und Haus (Montessori, Über uns, Anmeldung) · Himmel = Zeit (Tagesablauf, Termine, Schließzeiten).
       Der Hero der Startseite steht auf dem warmweißen Grund. Blau bleibt Aktionen vorbehalten. */
    --color-field-sun: var(--p-gold-50);
    --color-field-rose: var(--p-pink-100);
    --color-field-sky: var(--p-sky-100);
    --color-field-wood: var(--p-wood-50);     /* Bildgründe, Datumsmarken */
    --color-field-strong: var(--p-gold-200);  /* kräftige Fläche für die wichtigste Auskunft (Platzstatus) */
    --color-on-strong: var(--p-slate-900);
    --color-chip: var(--p-warm-0);            /* Zeitchips auf Flächen */
    --color-footer-bg: var(--p-gold-200);
    --color-footer-text: var(--p-slate-900);
    --color-footer-muted: var(--p-slate-600);
    --color-footer-accent: var(--p-blue-600);
    --color-footer-line: rgb(43 42 51 / 0.15);
    --color-footer-hover: rgb(255 255 255 / 0.45);  /* Knopf im Fuß bei Mouse-over */
    --color-focus: var(--color-accent);

    /* Farbrollen der Scherenschnitt-Illustrationen (Vertrag mit illustration.css / Illustration.tsx) */
    --illu-ground: var(--p-warm-0);
    --illu-field: var(--p-wood-50);
    --illu-paper: var(--p-white);
    --illu-accent: var(--p-pink-500);
    --illu-n1: var(--p-gold-500);
    --illu-n2: var(--p-sky-300);
    --illu-n3: var(--p-leaf-400);
    --illu-ink: var(--p-slate-900);
    --illu-wood: var(--p-wood-400);
    --illu-hair-blond: var(--p-hair-blond);
    --illu-hair-red: var(--p-hair-red);
    --illu-hair-brown: var(--p-hair-brown);
    --illu-hair-black: var(--p-hair-black);
    --illu-hair-grey: var(--p-hair-grey);
    --illu-skin-1: var(--p-skin-1);
    --illu-skin-2: var(--p-skin-2);
    --illu-skin-3: var(--p-skin-3);
    --illu-skin-4: var(--p-skin-4);

    --font-heading: var(--font-display);
    --font-text: var(--font-ui);
    /* ---- Typografie der Website: feste Rollen ------------------------------------------------------
       Jede Schriftangabe der Website nimmt genau eine Rolle aus dieser Liste – keine freien Werte in site.css.
       Größen relativ zum Container (cqi), damit die Handy-Vorschau im Editor wie ein echtes Handy rechnet.

       Größe        Verwendung
       display      Startseite: große Zeile im Hero
       h1           Seitentitel
       h2           Kapitelüberschrift
       h3           Unterkapitel (Monat in der Terminliste), Kapitel auf Rechtsseiten, Zitat, Menüeintrag
       h4           Kartentitel (Team, Hinweis, Frage, Kennenlern-Termin), Zwischenüberschrift im Text – immer größer als Fließtext
       figure       große Zahl oder Ziffer (Zahlen & Fakten, Schritte, Telefonnummer, Initiale)
       lead         Einleitung im Seitenkopf
       body         Fließtext, Knöpfe
       small        Hinweise, Chips, Listen-Nebentext
       meta         Bildunterschrift, Etikett, Dateiangaben
       micro        Wochentag in der Datumsmarke, Wortmarke unter 352 px

       Rang und Größe gehören zusammen – drei Überschriften-Rollen unterhalb des Seitentitels:
       Kapitel      <h2> in h2 (auf Rechtsseiten kompakt in h3)
       Karte        <h3> in h4, Überschriftenschrift
       Etikett      kleine Spaltenüberschrift (Fuß, Randnotiz): meta, Textschrift, Gewicht strong */
    --site-fs-display: clamp(2.5rem, 1.55rem + 4.2cqi, 4.75rem);         /* 40 → 76 */
    --site-fs-h1: clamp(2.125rem, 1.4rem + 3.2cqi, 4.25rem);             /* 34 → 68 */
    --site-fs-h2: clamp(1.75rem, 1.35rem + 1.9cqi, 2.75rem);             /* 28 → 44 */
    --site-fs-h3: clamp(1.375rem, 1.25rem + 0.6cqi, 1.75rem);            /* 22 → 28 */
    --site-fs-h4: clamp(1.125rem, 1.08rem + 0.25cqi, 1.3125rem);         /* 18 → 21 */
    --site-fs-figure: clamp(2.25rem, 1.6rem + 3cqi, 3.75rem);            /* 36 → 60 */
    --site-fs-lead: clamp(1.1875rem, 1.05rem + 0.6cqi, 1.5rem);          /* 19 → 24 */
    --site-fs-body: clamp(1.0625rem, 1.02rem + 0.15cqi, 1.125rem);       /* 17 → 18 */
    --site-fs-small: 0.9375rem;                                          /* 15 */
    --site-fs-meta: 0.875rem;                                            /* 14 */
    --site-fs-micro: 0.8125rem;                                          /* 13 */
    /* Gewichte: vier Stufen, mehr gibt es nicht */
    --site-fw-regular: 400;         /* Fließtext */
    --site-fw-medium: 550;          /* Navigation, ruhige Links */
    --site-fw-strong: 650;          /* Etiketten, Knöpfe, Hervorhebung im Text */
    --site-fw-heading: 750;         /* alles in der Überschriftenschrift */
    /* Zeilenhöhen: vier Stufen */
    --site-lh-display: 1.04;        /* Hero, Seitentitel, große Zahlen */
    --site-lh-heading: 1.15;        /* Überschriften */
    --site-lh-snug: 1.35;           /* Kartentitel, Etiketten, kurze Zeilen */
    --site-lh-text: 1.55;           /* Fließtext und alles Mehrzeilige */
    --site-heading-stretch: 92%;
    --site-heading-tracking: -0.015em;
    --site-label-tracking: 0.01em;  /* kleine Etiketten */
    --site-gutter: 1.5rem;          /* 24 px wie Bootstrap */
    --site-max: 100%;               /* Handy fließend; ab 576 px feste Stufen wie Bootstrap (site.css) */
    --site-pad: 1.25rem;            /* mobil 20 px; ab 576 px 12 px = halber Spaltenabstand (site.css) */
    /* Abstände zwischen Abschnitten: genau zwei Stufen, darunter der Absatz. Alles Kleinere nimmt --sp-*. */
    --site-chapter: clamp(3rem, 1.5rem + 5cqi, 6rem);   /* Kapitel 48 → 96 (mobil straffer) */
    --site-sub: clamp(2.25rem, 1.75rem + 3cqi, 4.5rem); /* Unterkapitel 36 → 72 */
    --site-para: 1rem;                                  /* Absatz 16 */
    --site-nudge: 0.125rem;         /* 2 px: Wert direkt unter seinem Etikett, zweite Zeile unter der ersten */
    --site-label-gap: 0.375rem;     /* 6 px: Icon vor einem Etikett */
    --site-measure: 42.5rem;        /* Lesespalte ≈ 680 px */
    --site-measure-intro: 38rem;    /* Einleitung im Seitenkopf */
    --site-measure-narrow: 34rem;   /* schmale Spalte ≈ 544 px: Text neben Bild, Karten, Bildunterschrift */
    --site-measure-wide: 58rem;     /* großes Zitat über die Lesespalte hinaus */
    --site-row: 3.5rem;             /* 56 px: Zeile, die man antippt (Menüeintrag, Frage, Datei) */
    --site-time-col-narrow: 6.25rem; /* … auf sehr schmalen Handys (unter 352 px) mit kleinerem Chip */
    --site-time-col: 8.25rem;       /* Spalte der Uhrzeit-Chips: so breit wie „10:00–10:30“ plus Luft */
    --site-date-mark: 3.75rem;      /* runde Datumsmarke 60 px; ab 768 px 72 px (site.css) */
    --site-header-h: 3.75rem;       /* Kopfhöhe 60 px; ab 1200 px 80 px (site.css) */
    --site-head-figure: 16rem;      /* Illustration im Seitenkopf: eine Zielhöhe für alle Motive (ab 768 px). Sie ragt oben und unten in den Innenabstand der Fläche (site.css), der Kopf bleibt überall gleich hoch */
    --site-head-min: 13.75rem;      /* Mindesthöhe des farbigen Seitenkopfs: mobil 220, ab 768 px 320 (site.css) – alle Unterseiten gleich hoch */
    --site-head-figure-m: 9rem;     /* … am Handy groß und mittig unter der Einleitung */
    --site-head-figure-s: 6.5rem;   /* … darunter eine Zielhöhe: klein, damit der Inhalt früh beginnt (576–767 px rechts neben dem Text) */
    /* Rundungen: Fläche (Kapitel, Seitenkopf) · Karte (Hinweis, Aufklapper, Datei, Termin, Adresse) · Pille (Knopf, Chip) · Würfel (Markierung) */
    --site-radius-field: 28px;      /* mobil 28, ab 992 px 36 */
    --site-radius-card: 20px;       /* mobil 20, ab 992 px 24 */
    --site-radius-cube: 2px;
    --site-radius-btn: var(--r-pill);
    --site-field-pad: clamp(1.375rem, 0.4rem + 4cqi, 4rem);  /* Innenabstand Kapitelflächen 22 → 64 */
    --site-field-pad-compact: clamp(1.5rem, 0.7rem + 3.3cqi, 3.25rem);  /* flachere Flächen: Seitenkopf, Platzstatus 24 → 52 */
    --site-list-indent: 1.3em;      /* Einzug von Aufzählungen (Platz für den Würfel) */
  }
}