/* Theme "BrownCookie": warmes Fast-Schwarz mit Sandgold, angelehnt an den Stil von arkwipe.com (Serverliste, Wipelist,
   Clusters). Kennzeichen: Flächen von #0a0908 bis #1f1d1a, feine dunkle Rahmen, Gold (#d4b880) als Akzent mit Verlauf
   (#ddc391 -> #b1925f), warmes Orange (#e0925a) und Salbeigrün (#7fb88a) als Statusfarben, Pillen als Buttons, große
   Rundungen, Schrift Inter (Text) und Manrope (Überschriften, Logo).
   Aufbau wie CoolBlue.css -- ein Theme muss alle Variablen setzen. */

/* Schriften liegen auf dem eigenen Server (assets/fonts, SIL Open Font License, siehe LICENSES), die Seite lädt keine
   fremden Dateien. Nur der Latin-Teil (inkl. Umlaute); variable Fonts, ein Schnitt je Datei. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("../../fonts/manrope-latin.woff2") format("woff2");
}

:root {
    /* Seitenhintergrund und Flächen */
    --bg: #0a0908;                               /* Seitenhintergrund */
    --surface-header: #12100e;                   /* Kopfbereich mit Logo */
    --surface-window: #111111;                   /* Inhaltsfenster (.card), dunkler als die Kacheln darin */
    --surface-card: #161514;                     /* Kacheln der Startseite und des Dashboards */
    --surface: #161514;                          /* Navigation, Seitenkacheln, Buttons */
    --surface-hover: #1f1d1a;
    --surface-tile: #1a1815;                     /* kleine Kacheln (Spiele der Startseite, Server-Chips) */
    --surface-input: #161514;                    /* Eingabefelder in Formularen, Ticketliste */
    --surface-sunken: #0d0c0a;                   /* abgesenkte Bereiche: Felder außerhalb von Formularen, Server Settings */
    --surface-dialog: #111111;                   /* Löschdialog */
    --surface-list-hover: #1c1a17;               /* Ticketliste beim Überfahren */
    --surface-disabled: #12110f;
    --surface-avatar: #3a3733;                   /* Avatar ohne Bild */
    --backdrop: rgba(0, 0, 0, .75);              /* abgedunkelter Hintergrund hinter Dialogen */

    /* Rahmen und Trennlinien */
    --border: #232220;
    --border-strong: #3a3733;
    --border-input: #3a3733;
    --border-blue: rgba(212, 184, 128, .22);     /* im Standard blau, hier die feine Goldlinie */
    --border-blue-soft: #3a3733;
    --border-blue-hover: rgba(212, 184, 128, .35);
    --border-divider: var(--border);             /* Trennlinien zwischen Zeilen von Listen und Tabellen */
    --border-header: #232220;
    --border-button: rgba(212, 184, 128, .32);   /* Rahmen der Buttons */
    --border-badge: #3a3733;                     /* Abzeichen in der UI-Demo */
    --border-placeholder: #62605b;               /* gestrichelter Platzhalter der Startseite */
    --border-light: #3a3733;
    --border-pale: #232220;

    /* Texte */
    --white: #ffffff;
    --black: #000000;
    --text-base: #ebe8e2;                        /* Grundfarbe der Seite */
    --text: #ebe8e2;
    --text-bright: #f5f2ec;
    --text-soft: #c9c4bb;
    --text-nav: #a8a39b;
    --text-nav-link: #c9c4bb;
    --text-muted: #8b8780;
    --text-hint: #8b8780;                        /* Hinweise unter Formularfeldern */
    --text-subtle: #7d7972;
    --text-footer: #8b8780;
    --text-note: #7d7972;
    --text-placeholder: #62605b;
    --text-dim: #77736c;
    --text-disabled: #4f4c47;
    --text-on-light: #1a1510;                    /* dunkle Schrift auf hellen Pillen und auf Gold */

    /* Akzentfarben */
    --green: #7fb88a;                            /* Salbeigrün (PvE, gute Werte) */
    --yellow: #d4b880;                           /* Sandgold: "#" vor Überschriften, Hervorhebungen */
    --gold: #d4b880;
    --red: #e07a70;
    --red-light: #e8948b;
    --violet: #b59cd9;
    --violet-light: #c4b0e3;
    --cyan: #7fc4c0;
    --orange: #e0925a;                           /* warmes Orange (PvP, Fokus) */
    --orange-light: #f0b98e;
    --magenta: #d98fb0;
    --blue: #9db8d6;                             /* gedämpftes Stahlblau */
    --blue-light: #b7cde4;
    --amber: #c98a3a;                            /* Warnsymbol (!) */
    --green-icon: #7fb88a;                       /* Symbol neuer Versionen */
    --blue-icon: #9db8d6;                        /* Lesebestätigung in Tickets */
    --red-notice: #e07a70;                       /* Randstrich wichtiger Hinweise */

    /* Links und Fokus */
    --link: #e6d2a8;
    --link-hover: #f3e6c8;
    --focus-border: #d4b880;

    /* Statusflächen und kräftige Rahmenfarben: zarte Tönungen wie auf arkwipe */
    --green-surface: rgba(127, 184, 138, .10);
    --teal-surface: #14231d;
    --yellow-surface: rgba(224, 146, 90, .10);
    --warning-surface: rgba(212, 184, 128, .10);
    --red-surface: rgba(224, 122, 112, .10);
    --blue-surface: #151a20;
    --green-pale: #dcefd9;
    --green-dark: #2f5d38;
    --red-pale: #f6dcd8;
    --red-dark: #8a2f26;
    --green-strong: #4f8a5a;
    --amber-border: #b1925f;

    /* Meldungen (Fehler, Erfolg, Warnung/Debug, blauer Debug) */
    --error-surface: rgba(224, 122, 112, .12);
    --error-text: #f2b8b1;
    --success-text: #b5dcbc;
    --warning-text: #e6d2a8;
    --info-text: #c4d4e6;
    --positive-text: #9fd0a9;                    /* positive Werte im Dashboard */

    /* Pillen (Status-Tags) wie auf arkwipe: feiner Rand in der eigenen Farbe (rund 30 %), zarte Tönung, normale Schrift */
    --pill-border: color-mix(in srgb, currentColor 30%, transparent);   /* currentColor = Textfarbe der jeweiligen Pille */
    --pill-font-weight: 500;
    --pill-padding-x: 9px;                       /* Innenabstand links und rechts */
    --pill-text-shift: 0em;                      /* Inter sitzt von sich aus mittig */
    --pill-neutral-surface: #161514;             /* graue Pillen */
    --pill-blue-surface: rgba(157, 184, 214, .10);
    --pill-blue-text: #b7cde4;
    --pill-violet-surface: rgba(181, 156, 217, .12);
    --pill-cyan-surface: rgba(127, 196, 192, .10);
    --pill-magenta-surface: rgba(217, 143, 176, .12);
    --pill-gray-surface: #3a3733;

    /* Schalter und Checkboxen */
    --switch-on-surface: #5c4a2c;
    --checkbox-mark: #1a1510;                    /* Haken in der Checkbox */
    --checkbox-disabled-checked: #4a3f2c;

    /* Pokale der Spielerliste (Black Mesa) */
    --trophy-gold: #ffd23f;
    --trophy-silver: #c9d1d9;
    --trophy-bronze: #cd7f32;

    /* Buttons im technischen Stil (Aliase auf die Akzentfarben) */
    --button-blue: var(--blue);
    --button-green: var(--green);
    --button-yellow: var(--yellow);
    --button-cyan: var(--cyan);
    --button-violet: var(--violet);
    --button-red: var(--red);
    --button-surface: var(--surface);
    --button-border: var(--border-input);

    /* Schatten: kräftig und weich, wie die Menüs und Dialoge auf arkwipe */
    --shadow-card: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-dropdown: 0 16px 40px rgba(0, 0, 0, .5);
    --shadow-dialog: 0 25px 60px rgba(0, 0, 0, .6);
    --shadow-field: 0 1px 0 rgba(255, 255, 255, .03) inset;   /* feiner Lichtrand oben in Feldern */
    --shadow-button: 0 1px 0 rgba(255, 255, 255, .03) inset;  /* feiner Lichtrand oben in Buttons */
    --shadow-online: 0 0 8px rgba(127, 184, 138, .6);         /* Schein um den grünen Online-Punkt */

    /* Rundungen, nach Bauteil: deutlich runder als im Standard, Buttons als Pillen */
    --radius-window: 16px;                       /* Fenster, Navigation, Seitenkacheln, Meldungen */
    --radius-panel: 14px;                        /* Bereiche in Fenstern: Server-Kacheln, aufklappbare Listen, Tickets */
    --radius-button: 999px;
    --radius-box: 10px;                          /* kleine Kästen: Kopierknopf, Zitat, Beispiel-Pille */
    --radius-small: 6px;                         /* Bilder, Avatare, Checkboxen, Fokusrahmen */
    --radius-tile: 10px;                         /* kleine Kacheln und Listeneinträge */
    --radius-flag: 2px;                          /* Flaggen */
    --radius-icon: 10px;                         /* Spiel-Icon in den Server-Kacheln */
    --radius-dialog: 16px;
    --radius-pill: 999px;                        /* Pillen, Fortschrittsbalken, Schalter */
    --radius-round: 50%;                         /* runde Punkte und Avatare */

    /* Schrift */
    --font-main: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: "Manrope", "Inter", system-ui, sans-serif;   /* Überschriften (h1-h3) */
    --font-logo: "Manrope", "Inter", system-ui, sans-serif;      /* Markenname */
    --logo-gradient: linear-gradient(100deg, #e6d2a8 0%, #d4b880 45%, #b1925f 100%);

    /* Formulare: gemeinsame Maße für alle Seiten (Mein Bereich, Settings, Benutzerverwaltung, Tickets, Kontakt, Login …) */
    --field-padding: 11px 12px;                  /* Innenabstand der Felder */
    --field-radius: 8px;                         /* Rundung der Felder */
    --field-gap: 10px;                           /* Beschriftung -> Feld und Grundabstand im Formular */
    --field-space: 8px;                          /* zusätzlicher Abstand unter einem Feld */
    --field-row-gap: calc(var(--field-gap) + var(--field-space));   /* Abstand zwischen zwei Formularzeilen */
    --form-columns-gap: 16px;                    /* Abstand nebeneinanderliegender Felder */
    --textarea-min-height: 110px;                /* Mindesthöhe von Textfeldern */
    --settings-label-column: minmax(153px, .9fr);   /* Breite der Beschriftungsspalte in den Settings */

    /* Layout */
    --window-width: 1080px;                      /* Einheitliche Breite aller normalen Fenster */
}