/* portal-ui – Tokens für DUNKEL, HELL und HOHEN KONTRAST.
 *
 * GUSCH-020, ADR 0028: Kopie aus absqr-brain/skills/portal-ui. Geändert sind
 * nur --p-font (Open Sans liegt lokal), die drei MARKE-Blöcke mit Ginko-Grün
 * und die daran hängenden Tönungen, Erfolgs- und Datenfarbe 2. Nachgerechnet
 * mit scripts/kontrast.py; tests/test_oberflaeche.py rechnet bei jedem Lauf nach.
 *
 * Aufbau: Beide Themes setzen dieselben Namen. Komponenten lesen nur
 * --p-*-Tokens, nie Hex-Werte. Beim Übertragen in ein Projekt ändert man
 * ausschließlich die Blöcke „MARKE" (je Theme einer) – alles andere
 * ist die Formensprache und bleibt.
 *
 * Umschalten: <html data-theme="dark|light|contrast">. Ohne Attribut gilt DUNKEL.
 * Wer dem Betriebssystem folgen will, setzt das Attribut beim Laden per
 * Skript (siehe demo.html).
 *
 * Kontraste: `python3 scripts/kontrast.py tokens.css` rechnet jedes
 * Textpaar nach WCAG 2.2 AA nach. Nach jeder Änderung an Farben laufen
 * lassen – ein Wert, der nicht nachgerechnet ist, ist geschätzt.
 */

@layer portal.tokens {

  /* ══ GEMEINSAM – unabhängig vom Theme ═══════════════════════════════ */
  :root {
    /* Alles in rem: Die Oberfläche folgt der Schrifteinstellung des
       Betriebssystems. Ausnahmen: Haarlinie und Breakpoints. */
    --p-hairline: 1px;

    /* FORM – eine Leiter. Pille ist die Form der Aktion, Fläche mit
       Ecken ist Inhalt. Innen = außen minus Abstand (konzentrisch). */
    --p-radius-xs: 0.375rem;   /*  6 */
    --p-radius-sm: 0.5rem;     /*  8 – Eingabe, Nav-Zeile */
    --p-radius-md: 0.75rem;    /* 12 – Karte in Karte, Menü, Hinweisbox */
    --p-radius:    1rem;       /* 16 – Karte, Panel */
    --p-radius-lg: 1.25rem;    /* 20 – Dialog */
    --p-radius-pill: 62.4375rem;

    /* MASSE */
    --p-control-h:    2.25rem;   /* 36 – Eingabe, Schaltfläche */
    --p-control-h-sm: 1.875rem;  /* 30 */
    --p-tap-min:      3rem;      /* 48 – Mindest-Trefferfläche */
    --p-nav-row-h:    2.125rem;  /* 34 */
    --p-topbar-h:     3.5rem;    /* 56 */
    --p-sidebar-w:    14.5rem;   /* 232 */
    --p-content-max:  73.75rem;  /* 1180 */
    --p-pad-card:     1.5rem;    /* 24 */
    --p-pad-panel:    1.25rem;   /* 20 */

    /* RASTER 0,25rem – nur Vielfache. */
    --p-1: 0.25rem;  --p-2: 0.5rem;   --p-3: 0.75rem;  --p-4: 1rem;
    --p-5: 1.25rem;  --p-6: 1.5rem;   --p-8: 2rem;     --p-10: 2.5rem;
    --p-12: 3rem;    --p-16: 4rem;    --p-20: 5rem;

    /* TYPOGRAFIE – Faktor ~1,25 ab 14 px. Gewicht und Farbe tragen mehr
       Hierarchie als Größe: 14/600/primär, 14/500/sekundär, 14/400/tertiär. */
    --p-font: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --p-font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
    --p-size-label: 0.6875rem;  /* 11 – Versalien, gesperrt */
    --p-size-meta:  0.75rem;    /* 12 */
    --p-size-body:  0.875rem;   /* 14 – Grundschrift */
    --p-size-md:    1rem;       /* 16 */
    --p-size-lg:    1.125rem;   /* 18 – Kartentitel */
    --p-size-xl:    1.375rem;   /* 22 – Seitentitel (klein und fett) */
    --p-size-2xl:   1.75rem;    /* 28 – Kennzahl */
    --p-size-3xl:   2.75rem;    /* 44 – nur Plakatseiten */
    --p-lh-tight: 1.15;  --p-lh-body: 1.55;
    --p-track-title: -0.022em;
    --p-track-label: 0.08em;

    /* FOKUS – outline, nicht box-shadow: ein Aktivzustand mit eigenem
       Schatten überschreibt sonst stumm den Ring. */
    --p-focus-color: var(--p-accent);
    --p-focus-width: 0.125rem;
    --p-focus-offset: 0.125rem;

    /* BEWEGUNG – nie ease-in; Hover bekommt eine gleichmäßige Kurve. */
    --p-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --p-ease-hover: ease;
    --p-t-hover: 140ms;
    --p-t-fast: 120ms;
    --p-t-base: 170ms;
  }


  /* ══ DUNKEL (Standard) ══════════════════════════════════════════════ */
  :root,
  :root[data-theme="dark"] {
    color-scheme: dark;

    /* ── MARKE ─ hier ersetzen ──────────────────────────────────────────
       Ginko-Grün, für Dunkel aufgehellt: Farbton des Logos (#004c3d) und
       der Überschriften der Website (#4d6d55). Regeln für eigene Werte:
         signal   = die EINE Signalfarbe (Fokus, Auswahl, Erfolg).
                    Auf --p-bg und --p-surface ≥ 4,5:1.
         from/to  = Verlauf der EINEN Primäraktion. Dunkel: aufgehellt,
                    damit --p-brand-ink darauf ≥ 7:1 hält. Ein einfarbiger
                    Verlauf (from = to) ist erlaubt.
         ink      = Schrift auf Signal- bzw. Verlaufsfläche. */
    --p-brand-signal:        #5ccfae;
    --p-brand-signal-hover:  #7ddbbf;
    --p-brand-signal-ink:    #03241c;
    --p-brand-from:          #8fd9c2;
    --p-brand-to:            #b2cbb8;
    --p-brand-from-hover:    #a6e2cf;
    --p-brand-to-hover:      #c3d8c8;
    --p-brand-ink:           #0a0a0a;
    /* ── Ende MARKE ───────────────────────────────────────────────────── */

    /* FLÄCHEN – reines Neutral, Ebenen gehen nur NACH OBEN (heller). */
    --p-bg:        #000000;
    --p-surface:   #141414;   /* Karte, Panel, Nav-Hover */
    --p-surface-2: #1f1f1f;   /* Karte in Karte, neutrale Schaltfläche */
    --p-surface-3: #2a2a2a;   /* Menü, Popover */
    /* Eingaben sind EINGELASSEN: dunkler als die Umgebung. */
    --p-field:       #1a1a1a;
    --p-field-hover: #212121;

    /* RAHMEN – halbtransparent, mischt sich mit dem Grund. */
    --p-border:        rgba(255, 255, 255, 0.09);
    --p-border-soft:   rgba(255, 255, 255, 0.06);
    --p-border-strong: rgba(255, 255, 255, 0.18);
    --p-border-hover:  rgba(255, 255, 255, 0.30);

    --p-scrim: rgba(0, 0, 0, 0.62);
    --p-shadow-pop:
      0 0 0 var(--p-hairline) var(--p-border-strong),
      0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.7);

    /* TEXT – vier Stufen. Nicht #FFF (Halation auf Schwarz). */
    --p-text:       #f5f5f5;
    --p-text-2:     #bdbdbd;
    --p-text-3:     #969696;
    --p-text-muted: #6e6e6e;   /* NUR Deaktiviertes – bewusst unter 4,5:1 */

    /* SIGNAL */
    --p-accent:       var(--p-brand-signal);
    --p-accent-hover: var(--p-brand-signal-hover);
    --p-accent-ink:   var(--p-brand-signal-ink);
    --p-accent-tint:  rgba(92, 207, 174, 0.10);   /* an Signalfarbe angleichen */
    --p-accent-line:  rgba(92, 207, 174, 0.32);

    /* PRIMÄRAKTION – genau eine gefüllte pro Ansicht. */
    --p-primary-fill:  linear-gradient(100deg, var(--p-brand-from) 0%, var(--p-brand-to) 100%);
    --p-primary-hover: linear-gradient(100deg, var(--p-brand-from-hover) 0%, var(--p-brand-to-hover) 100%);
    --p-primary-ink:   var(--p-brand-ink);

    /* DATEN – reserviert für Diagramme, nie für Bedienelemente. */
    --p-data-1: #8b6cff;  --p-data-2: #5ccfae;
    --p-data-3: #4fc3f7;  --p-data-4: #e8b83d;

    /* ZUSTÄNDE – nie die einzige Information: Symbol oder Klartext dazu. */
    --p-success: #5ccfae;  --p-success-tint: rgba(92, 207, 174, 0.10);
    --p-warning: #e8b83d;  --p-warning-tint: rgba(232, 184, 61, 0.10);
    --p-danger:  #ff7a6e;  --p-danger-tint:  rgba(255, 122, 110, 0.10);
    --p-info:    #4fc3f7;  --p-info-tint:    rgba(79, 195, 247, 0.10);
  }


  /* ══ HELL – gleiche Hierarchie, andere Mittel ═══════════════════════
     Dunkel hebt Ebenen durch hellere Flächen, hell durch WEISSE Karten
     auf grauem Grund. Die Reihenfolge bleibt: Grund < Karte < Karte in
     Karte < Überlagerung. Eingaben sind weiterhin eingelassen (grauer
     als die Karte). Rahmen sind schwarz mit Alpha. Schatten bleiben den
     Überlagerungen vorbehalten. Text ist nicht #000. */
  :root[data-theme="light"] {
    color-scheme: light;

    /* ── MARKE ─ hier ersetzen ──────────────────────────────────────────
       Hell braucht DUNKLERE Markenwerte als dunkel: Die aufgehellten
       Pastelltöne tragen auf Weiß nicht. Verlauf deshalb gesättigt, die
       Schrift darauf ist weiß (≥ 4,5:1 an beiden Enden UND in der Mitte).
       Ginko-Grün: Signal = Logo #004c3d, Verlauf zum Überschriftengrün
       #4d6d55 der Website (gemessen 15.10.2026, ADR 0028). */
    --p-brand-signal:        #004c3d;
    --p-brand-signal-hover:  #003a2f;
    --p-brand-signal-ink:    #ffffff;
    --p-brand-from:          #004c3d;
    --p-brand-to:            #4d6d55;
    --p-brand-from-hover:    #003a2f;
    --p-brand-to-hover:      #3f5c47;
    --p-brand-ink:           #ffffff;
    /* ── Ende MARKE ───────────────────────────────────────────────────── */

    --p-bg:        #f0f0f0;
    --p-surface:   #ffffff;
    --p-surface-2: #f6f6f6;
    --p-surface-3: #ffffff;   /* Überlagerung: Weiß plus Schatten */
    --p-field:       #f4f4f4;
    --p-field-hover: #ececec;

    --p-border:        rgba(0, 0, 0, 0.10);
    --p-border-soft:   rgba(0, 0, 0, 0.06);
    --p-border-strong: rgba(0, 0, 0, 0.20);
    --p-border-hover:  rgba(0, 0, 0, 0.38);

    --p-scrim: rgba(0, 0, 0, 0.45);
    --p-shadow-pop:
      0 0 0 var(--p-hairline) var(--p-border-strong),
      0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.28);

    --p-text:       #121212;
    --p-text-2:     #4a4a4a;
    --p-text-3:     #666666;
    --p-text-muted: #8f8f8f;   /* NUR Deaktiviertes */

    --p-accent:       var(--p-brand-signal);
    --p-accent-hover: var(--p-brand-signal-hover);
    --p-accent-ink:   var(--p-brand-signal-ink);
    --p-accent-tint:  rgba(0, 76, 61, 0.09);
    --p-accent-line:  rgba(0, 76, 61, 0.36);

    --p-primary-fill:  linear-gradient(100deg, var(--p-brand-from) 0%, var(--p-brand-to) 100%);
    --p-primary-hover: linear-gradient(100deg, var(--p-brand-from-hover) 0%, var(--p-brand-to-hover) 100%);
    --p-primary-ink:   var(--p-brand-ink);

    --p-data-1: #6a45e8;  --p-data-2: #004c3d;
    --p-data-3: #0b6fb0;  --p-data-4: #9a6500;

    --p-success: #00664f;  --p-success-tint: rgba(0, 102, 79, 0.10);
    --p-warning: #855800;  --p-warning-tint: rgba(133, 88, 0, 0.10);
    --p-danger:  #c0281f;  --p-danger-tint:  rgba(192, 40, 31, 0.09);
    --p-info:    #0b66a6;  --p-info-tint:    rgba(11, 102, 166, 0.09);
  }

  /* ══ HOHER KONTRAST – dritte Stufe, auf Dunkel aufgebaut ════════════
     Für Nutzer mit Sehschwäche, grelles Umgebungslicht und Pflichtenhefte
     mit AAA. Text ≥ 7:1, Rahmen sichtbar (≥ 3:1) statt unterschwellig:
     die einzige Stufe, in der Eingaben und Schalter ihre Kante zeigen.
     Wird wie die anderen gesetzt: <html data-theme="contrast">. */
  :root[data-theme="contrast"] {
    color-scheme: dark;

    /* ── MARKE ─ hier ersetzen: hell, damit Schwarz darauf trägt ────── */
    --p-brand-signal:        #8ff0d2;
    --p-brand-signal-hover:  #b0f6e1;
    --p-brand-signal-ink:    #000000;
    --p-brand-from:          #c8f2e4;
    --p-brand-to:            #d6ead9;
    --p-brand-from-hover:    #dcf8ee;
    --p-brand-to-hover:      #e5f2e8;
    --p-brand-ink:           #000000;
    /* ── Ende MARKE ───────────────────────────────────────────────────── */

    --p-bg:        #000000;
    --p-surface:   #0d0d0d;
    --p-surface-2: #1a1a1a;
    --p-surface-3: #262626;
    --p-field:       #050505;
    --p-field-hover: #141414;

    --p-border:        rgba(255, 255, 255, 0.55);
    --p-border-soft:   rgba(255, 255, 255, 0.35);
    --p-border-strong: rgba(255, 255, 255, 0.85);
    --p-border-hover:  rgba(255, 255, 255, 1);

    --p-scrim: rgba(0, 0, 0, 0.82);
    --p-shadow-pop:
      0 0 0 var(--p-hairline) var(--p-border-strong),
      0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.9);

    --p-text:       #ffffff;
    --p-text-2:     #ececec;
    --p-text-3:     #d0d0d0;
    --p-text-muted: #9a9a9a;

    --p-accent:       var(--p-brand-signal);
    --p-accent-hover: var(--p-brand-signal-hover);
    --p-accent-ink:   var(--p-brand-signal-ink);
    --p-accent-tint:  rgba(143, 240, 210, 0.16);
    --p-accent-line:  rgba(143, 240, 210, 0.80);

    --p-primary-fill:  linear-gradient(100deg, var(--p-brand-from) 0%, var(--p-brand-to) 100%);
    --p-primary-hover: linear-gradient(100deg, var(--p-brand-from-hover) 0%, var(--p-brand-to-hover) 100%);
    --p-primary-ink:   var(--p-brand-ink);

    --p-data-1: #b6a3ff;  --p-data-2: #8ff0d2;
    --p-data-3: #8fdcff;  --p-data-4: #ffd966;

    --p-success: #8ff0d2;  --p-success-tint: rgba(143, 240, 210, 0.16);
    --p-warning: #ffd966;  --p-warning-tint: rgba(255, 217, 102, 0.16);
    --p-danger:  #ff9a90;  --p-danger-tint:  rgba(255, 154, 144, 0.16);
    --p-info:    #8fdcff;  --p-info-tint:    rgba(143, 220, 255, 0.16);
  }
}