/*
 * EhrenPfoten — Markenschicht über GlassKit.
 *
 * Regel aus dem GlassKit-Web-SKILL: hier werden AUSSCHLIESSLICH --gl-*-Tokens
 * überschrieben. Keine Komponentenselektoren, kein Umfärben von glass-*-Regeln, kein
 * Eingriff in glasskit.css. Wer diese Datei entfernt, bekommt ein funktionierendes
 * GlassKit in Standardfarben — nichts bricht.
 *
 * Diese Datei ist die PRODUKTMARKE (Standard). Jedes Tierheim kann Primärfarbe und
 * Hintergründe über sein Theme (M7, theme.js) überschreiben; diese Werte gelten, solange
 * kein Mandant etwas anderes eingestellt hat.
 *
 * Setzt GlassKit >= 1.11 und GlassKit-Elements >= 1.9 voraus: Erst seit 1.9 erreicht die
 * Markenschicht die <glk-*>-Elemente (@layer glasskit-defaults), seit 1.11 folgen Halo,
 * Fokusring und Verlaufsmitte der Primärfarbe (Befunde 10 und 11 in stripe-jack-cloud).
 *
 * ── Die Palette, aus den Logo-Vorlagen (docs/brand/vorlage-1.jpg, vorlage-2.jpg) ───────
 *
 *   Terrakotta  Primärfarbe — Handlung: Knöpfe, Fokus, aktive Tabs. Liegt nahe am
 *               GlassKit-Bernstein, für den die Komponenten gestaltet sind, und hebt sich
 *               vom Petrol des Hintergrunds ab.
 *   Petrol      Hintergrund im dunklen Modus und Zweitakzent (--ep-teal). NICHT die
 *               Primärfarbe: Petrol-Knöpfe auf Petrol-Glas wären kaum vom Grund zu
 *               unterscheiden — GlassKits Standardhintergrund ist selbst ein dunkles Petrol.
 *   Creme       Hintergrund im hellen Modus. Schiefer die Schrift darauf.
 *
 * ── Nachgerechnet, nicht geschätzt (WCAG 2.1, Relativluminanz) ──────────────────────────
 * Hell    Terrakotta #ad4823: weiße Schrift darauf 5,63:1 · als Schrift auf der dunkelsten
 *         Grundstufe #efe9dc 4,66:1, auf Creme 5,09:1 (der Ton muss beides können,
 *         --gl-color-primary füllt Flächen UND färbt Text; #b84f27 verfehlte 4,15:1 auf #efe9dc)
 *         dunkelste Verlaufsstufe #a0421c: weiß 6,3:1
 *         Schrift #2e3a46 auf Creme #f7f3ea: 10,48:1 · Petrol #1f7a7e als Text: 4,58:1
 * Dunkel  Terrakotta #c25028: Weiß darauf 4,70:1 · gegen Petrol-Grund 2,57:1 (Sichtung M2: weiße Knopfschrift)
 *         dunkelste Verlaufsstufe #d96a3b (Vorlagenfarbe): Tinte 5,28:1
 *         Weiß auf Petrol #0f3c40: 12,06:1 · Petrol hell #6cc3c4 als Text: 5,88:1
 *
 * Die Knopfschrift ist je Modus eine ANDERE: hell weiß, dunkel dunkle Tinte. Ein einziger
 * Wert kann es nicht sein — weiß auf dem Vorlagen-Terrakotta #d96a3b erreicht nur 3,46:1.
 */

/* ---- Dunkel ----------------------------------------------------------------------- */
:root,
[data-theme='dark'] {
  /* Terrakotta so weit abgedunkelt, dass Weiß darauf 4,70:1 erreicht (Wunsch aus der
     Sichtung M2: weiße statt dunkler Knopfschrift). Preis: als Akzent auf Petrol #0f3c40
     nur 2,57:1, deshalb liest Text auf Flächen die aufgehellte Ableitung
     --gl-color-primary-on-surface (GlassKit mischt 50 % Weiß dazu). */
  --gl-color-primary: #c25028;
  --gl-color-primary-dark: #ab4521;
  --gl-color-on-primary: #ffffff;

  /* Petrol aus der runden Vorlage, in drei Stufen. */
  --gl-color-bg-dark: #0f3c40;
  --gl-color-bg-mid: #1a4f54;
  --gl-color-bg-light: #1f5f63;

  /* Aurora: Terrakotta glimmt warm im Grund, Petrol hell setzt kühle Lichter. */
  --gl-bg-aurora-1: rgba(232, 128, 90, 0.16);
  --gl-bg-aurora-2: rgba(15, 60, 64, 0.55);
  --gl-bg-aurora-3: rgba(108, 195, 196, 0.12);
  --gl-bg-warm-glow: rgba(232, 128, 90, 0.16);
}

/* ---- Hell -------------------------------------------------------------------------- */
[data-theme='light'] {
  --gl-color-primary: #ad4823;
  --gl-color-primary-dark: #a0421c;
  /* Hier ist Weiß richtig: 5,63:1 auf der Primärfarbe, 6,3:1 auf der dunkelsten Stufe. */
  --gl-color-on-primary: #ffffff;

  /* Creme aus der horizontalen Vorlage; bg-dark ist bei GlassKit die dunkelste Grundstufe. */
  --gl-color-bg-dark: #efe9dc;
  --gl-color-bg-mid: #f7f3ea;
  --gl-color-bg-light: #fbf9f4;

  --gl-color-text: #2e3a46;
  --gl-color-text-heading: #1f2a35;

  --gl-bg-aurora-1: rgba(217, 106, 59, 0.12);
  --gl-bg-aurora-2: rgba(31, 122, 126, 0.08);
  --gl-bg-aurora-3: rgba(31, 122, 126, 0.1);
  --gl-bg-warm-glow: rgba(217, 106, 59, 0.12);
}

/* ---- Der helle Modus OHNE gesetztes Attribut ---------------------------------------
 * index.html setzt data-theme vor dem ersten Malen. Ohne JavaScript passiert das nicht;
 * dann sollen wenigstens die Farben stimmen. Werte identisch mit dem Block oben.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='light']) {
    --gl-color-primary: #ad4823;
    --gl-color-primary-dark: #a0421c;
    --gl-color-on-primary: #ffffff;
    --gl-color-bg-dark: #efe9dc;
    --gl-color-bg-mid: #f7f3ea;
    --gl-color-bg-light: #fbf9f4;
    --gl-color-text: #2e3a46;
    --gl-color-text-heading: #1f2a35;
    --gl-bg-aurora-1: rgba(217, 106, 59, 0.12);
    --gl-bg-aurora-2: rgba(31, 122, 126, 0.08);
    --gl-bg-aurora-3: rgba(31, 122, 126, 0.1);
    --gl-bg-warm-glow: rgba(217, 106, 59, 0.12);
  }
}

/* ---- Produkteigene Tokens ---------------------------------------------------------
 * Eigenes Präfix, damit sie nie mit GlassKit kollidieren. Sie werden geerbt und erreichen
 * die Shadow Roots, weil GlassKit sie nicht selbst deklariert. Petrol ist der Zweitakzent
 * (Illustration, Avatare, Info-Badges), Terrakotta die Marke, Creme und Tinte die Vorlage.
 */
:root {
  --ep-teal: #6cc3c4;
  --ep-teal-deep: #1f7a7e;
  --ep-terracotta: #e8805a;
  --ep-cream: #f7f3ea;
  --ep-ink: #2e3a46;
}
[data-theme='light'] {
  --ep-teal: #1f7a7e;
  --ep-terracotta: #ad4823;
}