/* ============================================================
   Riwius Hub – Design-Tokens (einzige Quelle für Farben, Typo,
   Abstände, Radien, Schatten, Bewegung und Ebenen)
   ------------------------------------------------------------
   Regeln (siehe docs/17-admin-ui-muster.md, Abschnitt „Design-Tokens"):
   - Neue Regeln verwenden NUR diese Tokens, keine Literal-Werte.
   - Es gibt keine Alias-Schicht mehr (seit R2-9): --vault, --amber, --ink …
     sind entfernt, alle Stylesheets und Skripte nutzen direkt --c-* usw.
   - Tokens werden vor site.css/chat.css/obs.css geladen (_Layout,
     _LayoutEmbed, ChatDock).
   - Themes: dunkel ist Standard. Hell gilt bei prefers-color-scheme: light
     oder data-theme="light" am <html> (Wahl im Konto-Menü, js/theme.js).
     data-theme="dark" erzwingt dunkel (Cockpit, OBS-Dock, eingebettete
     Seiten, Videoeditor). Neue Farb-Tokens immer in BEIDEN Blöcken setzen.
   ============================================================ */

:root {
    color-scheme: dark;   /* Formular-Steuerelemente, Scrollleisten */

    /* ---------- Flächen ---------- */
    --c-bg:            #14131c;   /* Seitengrund */
    --c-surface-1:     #1b1a26;   /* Panels, Menüs */
    --c-surface-2:     #232234;   /* Eingaben, Hover, Zweitflächen */
    --c-border:        rgba(255, 255, 255, .08);
    --c-border-strong: rgba(255, 255, 255, .14);
    --c-scrim:         rgba(0, 0, 0, .55);   /* Abdunklung hinter Schubladen und Dialogen */

    /* ---------- Medien (Videos, Bilder, Clips): in beiden Themes gleich, nicht im hellen Block überschreiben ---------- */
    --c-media:         #000000;                 /* Grund hinter Videos und Bildern */
    --c-on-media:      #ffffff;                 /* Text und Symbole auf Videos, Bildern und dunklen Abzeichen darauf */
    --c-media-scrim:   rgba(10, 9, 15, .84);    /* Abzeichen und Leisten auf Medien (Anzahl, Dauer, Vollbild) */
    --c-media-shade:   rgba(0, 0, 0, .28);      /* leichte Abdunklung über einem Vorschaubild (Abspielen) */
    --shadow-on-media: 0 1px 3px rgba(0, 0, 0, .85);   /* Textschatten für Schrift direkt auf Bildern */
    --c-knob:          #ffffff;                 /* Knopf im Schalter (.switch) */

    /* ---------- Text ---------- */
    --c-text:          #eceaf4;   /* 15,5:1 auf --c-bg */
    --c-text-muted:    #9b97ad;   /* 6,5:1 auf --c-bg */

    /* ---------- Akzent (eine Markenfarbe) ---------- */
    --c-accent:        #f4b740;   /* Primäraktion, Aktiv-Zustand, Fokus */
    --c-on-accent:     #1a1407;   /* Text/Icon auf Akzentfläche */

    /* ---------- Twitch (nur für Twitch-Bezug, nie als Fließtextfarbe) ---------- */
    --c-twitch:        #9146ff;   /* Flächen, Rahmen, Icons (3,97:1 – nicht für Text) */
    --c-twitch-strong: #772ce8;
    --c-twitch-text:   #bf94ff;   /* Text mit Twitch-Bezug (7,8:1 auf --c-bg) */
    --c-on-twitch:     #ffffff;   /* Text/Icon auf Twitch-Lila- und Statusflächen (4,6:1 auf --c-twitch) */

    /* ---------- Status (immer zusätzlich mit Text oder Icon) ---------- */
    --c-success:       #4ade80;
    --c-warning:       #fb923c;   /* Orange – bewusst klar vom Akzent-Amber unterscheidbar (8,1:1) */
    --c-danger:        #e5484d;   /* Rahmen, Flächen, destruktive Aktionen */
    --c-danger-text:   #ff5e5e;   /* Text/Icon in Gefahr-Zustand auf dunklem Grund */
    --c-info:          #4aa3ff;

    /* ---------- Domäne: Seltenheit (nur Items/Lootboxen) ---------- */
    --c-rarity-common:    #8b93a7;
    --c-rarity-uncommon:  #4ade80;
    --c-rarity-rare:      #4aa3ff;
    --c-rarity-epic:      #b06cff;
    --c-rarity-legendary: #f4b740;

    /* ---------- Domäne: Platzierungen (Rang 2/3; Rang 1 = Akzent) ---------- */
    --c-medal-silver:  #cbd2dd;
    --c-medal-bronze:  #d08b52;

    /* ---------- Zustände (R2-9) ---------- */
    --c-disabled-bg:     #201f2d;                    /* deaktivierte Knöpfe: neutrale Fläche statt Deckkraft */
    --c-disabled-text:   #6f6b82;
    --c-disabled-border: rgba(255, 255, 255, .06);
    --c-sunken:          rgba(0, 0, 0, .2);          /* abgesenkte Fläche in einem Panel (Infozeile, Besitzerliste) */
    /* Getönte Knöpfe (Seltenheit, Erfolg): Anteil der Farbe --rc an Fläche und Rand */
    --tint-base:     var(--c-surface-2);
    --tint-bg:       22%;
    --tint-bg-hover: 34%;
    --tint-border:   45%;

    /* ---------- Typografie ---------- */
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --fs-xs:   .75rem;    /* Minimum für Text */
    --fs-sm:   .875rem;
    --fs-md:   1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;
    /* Rollen (Runde 2, R2-2): Seitentitel, Startseiten-Hero, hervorgehobene Werte (Gewinn, Gewinner) */
    --fs-page:      clamp(1.6rem, 4vw, 2.25rem);
    --fs-display:   clamp(2.4rem, 7vw, 4.2rem);
    --fs-highlight: clamp(1.4rem, 3.5vw, 2rem);
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-heavy:    800;   /* Marke, große Zahlen */
    --lh-tight: 1.25;
    --lh-base:  1.55;

    /* ---------- Abstände (4er-Raster) ---------- */
    --sp-0: .125rem;   /* Mikroabstand: gestapelte Titel/Untertitel, Innenabstand kleiner Kennzeichen */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* ---------- Radien ---------- */
    --r-xs:    3px;     /* Mikro-Elemente: Balken, Markierungen, Fortschritt */
    --r-sm:    6px;     /* Chips, kleine Controls */
    --r-md:    10px;    /* Buttons, Eingaben, Panels */
    --r-pill:  999px;   /* Segmente, Badges, Pills */
    --r-round: 50%;     /* Avatare, Punkte */

    /* ---------- Schatten (Ebenen entstehen über Fläche + Rahmen) ---------- */
    --shadow-overlay: 0 10px 30px rgba(0, 0, 0, .5);   /* Menüs, Dropdowns, Dialoge, Toasts */
    --shadow-knob:    0 1px 4px rgba(0, 0, 0, .5);     /* Griffe von Schaltern und Reglern */
    --shadow-none:    none;

    /* ---------- Fokus ---------- */
    --focus-ring:   2px solid var(--c-accent);
    --focus-offset: 2px;

    /* ---------- Bewegung (bei prefers-reduced-motion global aus) ---------- */
    --dur-fast: .12s;
    --dur-base: .15s;
    --dur-slow: .25s;
    --ease:     ease;

    /* ---------- Ebenen ---------- */
    --z-sticky:   20;     /* Topbar */
    --z-drawer:   30;
    --z-dropdown: 60;     /* Menüs, Popover */
    --z-dialog:   1000;   /* Dialoge, Modals */
    --z-toast:    9999;

    /* ---------- Layout ---------- */
    --content-max: 1120px;
    --studio-max:  90rem;    /* Inhalts-Container aller Studio-Seiten (einheitlich, linksbündig) */
    --panel-w:     20rem;    /* Seitenpanel rechts im Studio (Hilfe, Befehle, Variablen) */
    --side-w:      16rem;    /* Sidebar der App-Shell (Admin/Editor) */
    --tabbar-h:    3.75rem;  /* mobile Tab-Leiste unten (unter 640px) */
    /* Breakpoints (in Media Queries nicht als Variable nutzbar, daher als Konvention):
       sm < 640px · md 640–1023px · lg 1024–1439px · xl ≥ 1440px */
}

/* ---------- Helles Theme ----------
   Systemeinstellung „hell“ (ohne erzwungenes dunkles Theme) oder ausdrücklich gewählt.
   Beide Blöcke sind absichtlich gleich – ohne Build-Schritt lässt sich eine Media-Query
   nicht mit einem Attribut-Selektor zu einer Regel zusammenfassen. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --c-bg:            #f5f4f8;
        --c-surface-1:     #ffffff;
        --c-surface-2:     #ebe9f1;
        --c-border:        rgba(20, 19, 28, .10);
        --c-border-strong: rgba(20, 19, 28, .18);
        --c-scrim:         rgba(20, 19, 28, .45);
        --c-text:          #1b1a24;   /* 15,7:1 auf --c-bg */
        --c-text-muted:    #5b5869;   /* 6,3:1 */
        --c-accent:        #9a5b00;   /* als Text 5,0:1; Fläche mit weißem Text 5,4:1 */
        --c-on-accent:     #ffffff;
        --c-twitch-text:   #6d28d9;   /* 6,5:1 */
        --c-success:       #13733a;
        --c-warning:       #b53d0b;
        --c-danger:        #d42020;
        --c-danger-text:   #b91c1c;   /* 5,9:1 */
        --c-info:          #1a5fd0;
        --c-rarity-common:    #5b6475;
        --c-rarity-uncommon:  #13733a;
        --c-rarity-rare:      #1a5fd0;
        --c-rarity-epic:      #7e22ce;
        --c-rarity-legendary: #9a5b00;
        --c-medal-silver:  #5d6b80;
        --c-medal-bronze:  #9a5426;
        --shadow-overlay:  0 10px 30px rgba(20, 19, 28, .18);
        --c-disabled-bg:     #ecebf1;
        --c-disabled-text:   #9693a3;
        --c-disabled-border: rgba(20, 19, 28, .08);
        --c-sunken:          rgba(20, 19, 28, .04);
        --tint-base:     var(--c-surface-1);
        --tint-bg:       14%;
        --tint-bg-hover: 22%;
        --tint-border:   65%;
        --shadow-knob:   0 1px 2px rgba(20, 19, 28, .25);
    }
}
:root[data-theme="light"] {
    color-scheme: light;
    --c-bg:            #f5f4f8;
    --c-surface-1:     #ffffff;
    --c-surface-2:     #ebe9f1;
    --c-border:        rgba(20, 19, 28, .10);
    --c-border-strong: rgba(20, 19, 28, .18);
    --c-scrim:         rgba(20, 19, 28, .45);
    --c-text:          #1b1a24;   /* 15,7:1 auf --c-bg */
    --c-text-muted:    #5b5869;   /* 6,3:1 */
    --c-accent:        #9a5b00;   /* als Text 5,0:1; Fläche mit weißem Text 5,4:1 */
    --c-on-accent:     #ffffff;
    --c-twitch-text:   #6d28d9;   /* 6,5:1 */
    --c-success:       #13733a;
    --c-warning:       #b53d0b;
    --c-danger:        #d42020;
    --c-danger-text:   #b91c1c;   /* 5,9:1 */
    --c-info:          #1a5fd0;
    --c-rarity-common:    #5b6475;
    --c-rarity-uncommon:  #13733a;
    --c-rarity-rare:      #1a5fd0;
    --c-rarity-epic:      #7e22ce;
    --c-rarity-legendary: #9a5b00;
    --c-medal-silver:  #5d6b80;
    --c-medal-bronze:  #9a5426;
    --shadow-overlay:  0 10px 30px rgba(20, 19, 28, .18);
    --c-disabled-bg:     #ecebf1;
    --c-disabled-text:   #9693a3;
    --c-disabled-border: rgba(20, 19, 28, .08);
    --c-sunken:          rgba(20, 19, 28, .04);
    --tint-base:     var(--c-surface-1);
    --tint-bg:       14%;
    --tint-bg-hover: 22%;
    --tint-border:   65%;
    --shadow-knob:   0 1px 2px rgba(20, 19, 28, .25);
}

/* Schriftstufen einer Cockpit-Kachel (data-fs am html der eingebetteten Ansicht): alle rem-Größen wachsen mit. */
html[data-fs="l"]  { font-size: 118.75%; }
html[data-fs="xl"] { font-size: 137.5%; }