/* ==========================================================================
   ORBITUM – Standard-Theme „dark“
   --------------------------------------------------------------------------
   Hier wird das komplette Aussehen eingestellt. Die Seiten selbst (orbitum.css)
   verwenden ausschließlich diese Variablen.

   So passt du das Aussehen an:
   • Schrift:  --og-font / --og-font-heading / --og-mono (+ Google-Font-Link in App.razor)
   • Größe:    --og-font-size skaliert ALLES (Schrift, Abstände, Karten), z. B. 15px oder 17px
   • Farben:   die Grundfarben unten; Hintergründe für Hinweise usw. werden daraus berechnet
   • Eigenes Theme: Datei kopieren (z. B. themes/mein-theme.css), Selektor auf
     :root[data-theme="mein-theme"] ändern, nur die gewünschten Werte überschreiben,
     in App.razor verlinken und in appsettings.json "Ui:Theme": "mein-theme" setzen.
   ========================================================================== */

:root {
    /* ---------- Schrift ---------- */
    --og-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --og-font-heading: var(--og-font);
    --og-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
    --og-font-size: 16px;            /* Grundgröße – skaliert die gesamte Oberfläche */
    --og-line-height: 1.5;

    --og-fs-xs: .72rem;              /* Kleine Beschriftungen, Abschnittstitel */
    --og-fs-sm: .82rem;              /* Nebeninfos, Kosten */
    --og-fs-md: .92rem;              /* Kartennamen, Tabellen */
    --og-fs-base: 1rem;
    --og-fs-lg: 1.15rem;             /* Panel-Überschrift */
    --og-fs-xl: 1.5rem;              /* Seitenüberschrift */
    --og-fs-logo: 1.05rem;
    --og-fs-art: 1.6rem;             /* Kürzel im Bildplatz (ohne Grafik) */
    --og-fs-hero: 2.6rem;            /* Logo auf der Startseite */

    --og-fw-normal: 400;
    --og-fw-bold: 600;
    --og-fw-heavy: 800;
    --og-letter-caps: .12em;         /* Buchstabenabstand bei GROSSBUCHSTABEN-Titeln */

    /* ---------- Größen & Abstände ---------- */
    --og-space-1: .25rem;
    --og-space-2: .5rem;
    --og-space-3: .75rem;
    --og-space-4: 1rem;
    --og-space-5: 1.25rem;
    --og-space-6: 1.5rem;

    --og-radius: .75rem;             /* Karten, Panels */
    --og-radius-sm: .55rem;          /* Knöpfe, Eingabefelder */
    --og-radius-pill: 999px;

    --og-top: 4rem;                  /* Höhe der Kopfleiste */
    --og-side: 16.5rem;              /* Breite der linken Leiste */
    --og-side-rail: 3.75rem;         /* Breite der eingeklappten Leiste (nur Symbole) */
    --og-panel-width: 22.5rem;       /* Breite des Seitenpanels */
    --og-card-min: 12rem;            /* Mindestbreite einer Technik-Karte */
    --og-card-min-mobile: 9.5rem;
    --og-grid-min: 20rem;            /* Mindestbreite der Kacheln in der Kommandozentrale */
    --og-art-ratio: 16 / 9;          /* Seitenverhältnis der Grafiken */
    --og-bottom-nav: 4rem;           /* Höhe der Handy-Navigation */
    --og-narrow-width: 32rem;        /* Schmale Formulare (Willkommen, Suche) */
    --og-hero-width: 40rem;          /* Textbreite der Startseite */
    --og-page-width: 64rem;          /* Inhaltsbreite der Konto-Seiten (Login, Registrierung …) */

    /* ---------- Grundfarben ---------- */
    --og-bg: #0a0e19;                /* Seitenhintergrund */
    --og-bg-2: #0f1424;              /* Vertiefte Flächen (Eingabefelder, Slots) */
    --og-panel: #141a2e;             /* Karten */
    --og-panel-2: #1a2240;           /* Hervorgehobene Flächen (aktiver Menüpunkt) */
    --og-border: #26304f;
    --og-text: #e7eaf6;
    --og-muted: #8d98ba;
    --og-accent: #7b93ff;            /* Hauptakzent (Links, aktive Elemente) */
    --og-accent-2: #a47bff;          /* Zweiter Akzent (Verläufe) */
    --og-on-accent: #ffffff;         /* Text auf Akzentflächen */

    --og-ok: #4fd99a;
    --og-warn: #ffc65c;
    --og-danger: #ff6b7a;

    --og-metal: #b8c2d8;
    --og-crystal: #62c9ff;
    --og-deut: #4ee3b6;
    --og-energy: #ffd166;

    /* ---------- Abgeleitete Farben (normalerweise nicht ändern) ---------- */
    --og-glow: color-mix(in srgb, var(--og-accent) 22%, transparent);    /* Lichtschein oben rechts */
    --og-topbar-bg: color-mix(in srgb, var(--og-bg) 92%, transparent);
    --og-side-bg: color-mix(in srgb, var(--og-bg-2) 60%, transparent);
    --og-overlay: color-mix(in srgb, var(--og-bg) 80%, transparent);
    --og-accent-hover: color-mix(in srgb, var(--og-accent) 70%, white);

    --og-ok-bg: color-mix(in srgb, var(--og-ok) 8%, transparent);
    --og-ok-line: color-mix(in srgb, var(--og-ok) 35%, transparent);
    --og-ok-text: color-mix(in srgb, var(--og-ok) 45%, var(--og-text));
    --og-warn-bg: color-mix(in srgb, var(--og-warn) 8%, transparent);
    --og-warn-line: color-mix(in srgb, var(--og-warn) 40%, transparent);
    --og-warn-text: color-mix(in srgb, var(--og-warn) 45%, var(--og-text));
    --og-danger-bg: color-mix(in srgb, var(--og-danger) 8%, transparent);
    --og-danger-line: color-mix(in srgb, var(--og-danger) 40%, transparent);
    --og-danger-text: color-mix(in srgb, var(--og-danger) 45%, var(--og-text));

    /* Bildplatz-Verläufe je Bereich (sichtbar, solange keine Grafik vorhanden ist) */
    --og-art-building: #2a3b6e, #121a35;
    --og-art-research: #3d2a6e, #171236;
    --og-art-ship: #1f4a64, #0e1a2b;
    --og-art-defense: #5a2f3f, #1d1119;
    --og-art-text: color-mix(in srgb, var(--og-text) 22%, transparent);

    /* Bootstrap (Konto-Seiten: Login, Registrierung …) an das Theme anbinden */
    --bs-body-bg: var(--og-bg);
    --bs-body-color: var(--og-text);
    --bs-body-font-family: var(--og-font);
    --bs-border-color: var(--og-border);
    --bs-secondary-color: var(--og-muted);
    --bs-tertiary-bg: var(--og-panel);
    --bs-link-color: var(--og-accent);
    --bs-link-hover-color: var(--og-accent-hover);
    --bs-emphasis-color: var(--og-text);
}