/*!
 * StatusForge Theme
 * Name: Scarlet Noir
 * Name[de]: Scarlet Noir
 * Name[es]: Scarlet Noir
 * Name[fr]: Scarlet Noir
 * Name[it]: Scarlet Noir
 * Name[nl]: Scarlet Noir
 * Name[pt-BR]: Scarlet Noir
 * Name[tr]: Scarlet Noir
 * Name[cs]: Scarlet Noir
 * Name[pl]: Scarlet Noir
 * Name[ru]: Scarlet Noir
 * Name[ar]: Scarlet Noir
 * Description: Near-black surfaces, crimson identity, cyan for anything you can act on.
 * Description[de]: Fast schwarze Flächen, Crimson als Identität, Cyan für alles Bedienbare.
 * Description[es]: Superficies casi negras, identidad carmesí, cian para todo lo accionable.
 * Description[fr]: Surfaces presque noires, identité cramoisie, cyan pour tout ce qui est actionnable.
 * Description[it]: Superfici quasi nere, identità cremisi, ciano per tutto ciò su cui si può agire.
 * Description[nl]: Bijna zwarte vlakken, karmozijnrode identiteit, cyaan voor alles wat bedienbaar is.
 * Description[pt-BR]: Superfícies quase pretas, identidade carmesim, ciano para tudo que é acionável.
 * Description[tr]: Neredeyse siyah yüzeyler, kızıl kimlik, tıklanabilir her şey için camgöbeği.
 * Description[cs]: Téměř černé plochy, karmínová identita, azurová pro vše ovladatelné.
 * Description[pl]: Prawie czarne powierzchnie, karmazynowa tożsamość, cyjan dla wszystkiego, co klikalne.
 * Description[ru]: Почти чёрные поверхности, багровая идентичность, голубой для всего, что можно нажать.
 * Description[ar]: أسطح شبه سوداء، وهوية قرمزية، وسماوي لكل ما يمكن التفاعل معه.
 * Accent: #1ecaf6
 * Scheme: both
 * Author: kaufmeinewebsite.de
 */

/* --------------------------------------------------------------------------
   Die Hausfarben von kaufmeinewebsite.de, übersetzt in das Tokensystem.

   ⚠️ Die eine Entscheidung, die dieses Theme trägt: **Crimson fasst kein
   Statuselement an.**

   Heart-Crimson ist oklch(60% 0.230 20.9). Die Störungsfarbe des Produkts ist
   oklch(62% 0.20 25). Vier Grad Farbton auseinander — für ein Auge dasselbe
   Rot. Ein rotes Markenakzent auf einer Statusseite heißt: der Besucher kann
   nicht unterscheiden, ob da etwas kaputt ist oder ob das nur das Logo war.
   Auf einer Seite, deren einziger Zweck es ist, genau diese Frage in einer
   halben Sekunde zu beantworten, ist das kein Stilproblem.

   Also: **Logo-Cyan** (Farbton 222, weit weg von Grün 152, Gelb 78, Rot 25)
   trägt alles Bedienbare — Links, Knöpfe, Fokusringe. **Crimson** bleibt
   Identität: der Schimmer hinter dem Hero, die Markenkante. Die Statuspalette
   bleibt unangetastet.
   -------------------------------------------------------------------------- */

:root {
    /* Bedienakzent — Logo-Cyan. Die drei Zahlen, aus denen das Produkt seine
       ganze Akzentskala ableitet. */
    --sf-accent-h: 221.7;
    --sf-accent-c: 0.139;
    --sf-accent-l: 62%;

    /* Identität. Wird NUR von Markenflächen benutzt, nie von Status. */
    --sf-brand: oklch(60.3% 0.230 20.9);
    --sf-brand-soft: oklch(60.3% 0.230 20.9 / 0.14);
    --sf-brand-glow: oklch(60.3% 0.230 20.9 / 0.22);

    /* Helle Fassung: die Marke ist dunkel zu Hause, hell bleibt sie ruhig und
       kühl statt eine schlechtere Kopie des Dunkeln zu sein. */
    --sf-bg: oklch(98.5% 0.004 250);
    --sf-bg-subtle: oklch(96.4% 0.007 252);
    --sf-surface: oklch(100% 0 0);
    --sf-surface-raised: oklch(100% 0 0);
    --sf-surface-sunken: oklch(97% 0.006 252);
    --sf-border: oklch(90% 0.011 252);
    --sf-border-strong: oklch(83% 0.016 252);
}

/* --------------------------------------------------------------------------
   Dunkel — der eigentliche Auftritt. Zweimal geschrieben, weil das Produkt das
   so macht: einmal für die Systemeinstellung, einmal für den Schalter. Fehlt
   eine der beiden Fassungen, widersprechen sich Schalter und Betriebssystem.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sf-bg: oklch(16.2% 0.020 255.3);
        --sf-bg-subtle: oklch(18.4% 0.022 257);
        --sf-surface: oklch(19.4% 0.025 259.2);
        --sf-surface-raised: oklch(22.2% 0.026 259);
        --sf-surface-sunken: oklch(14.6% 0.018 255);
        --sf-border: oklch(27.8% 0.030 256.8);
        --sf-border-strong: oklch(34% 0.034 257);
        --sf-text: oklch(96.9% 0.005 247.9);
        --sf-text-muted: oklch(72.2% 0.033 252.8);
        --sf-text-subtle: oklch(60% 0.028 253);

        /* Etwas heller als im Hellen: auf fast schwarzem Grund braucht Cyan
           Leuchtkraft, sonst verschwindet ein Link im Hintergrund. */
        --sf-accent-l: 70%;
    }
}

:root[data-theme="dark"] {
    --sf-bg: oklch(16.2% 0.020 255.3);
    --sf-bg-subtle: oklch(18.4% 0.022 257);
    --sf-surface: oklch(19.4% 0.025 259.2);
    --sf-surface-raised: oklch(22.2% 0.026 259);
    --sf-surface-sunken: oklch(14.6% 0.018 255);
    --sf-border: oklch(27.8% 0.030 256.8);
    --sf-border-strong: oklch(34% 0.034 257);
    --sf-text: oklch(96.9% 0.005 247.9);
    --sf-text-muted: oklch(72.2% 0.033 252.8);
    --sf-text-subtle: oklch(60% 0.028 253);
    --sf-accent-l: 70%;
}

/* --------------------------------------------------------------------------
   Markenflächen — nur Werte, keine Selektoren.

   Die Mechanik dafür steht in public.css: der Hero hat eine zweite,
   unabhängige Ebene (::after) für die Marke, weil ::before die STATUS-Wäsche
   trägt. Ein Theme, das seine Farbe dort hineinschriebe, überschriebe den
   Status — und damit die einzige Aussage, die die Seite treffen muss.

   Alle drei Token sind ohne Theme transparent. Eine Installation ohne dieses
   Theme sieht also exakt aus wie vorher.
   -------------------------------------------------------------------------- */

:root {
    --sf-brand-glow: oklch(60.3% 0.230 20.9 / 0.20);
    --sf-brand-edge: oklch(60.3% 0.230 20.9 / 0.30);
    --sf-brand-mark: linear-gradient(135deg, oklch(60.3% 0.230 20.9), oklch(77.9% 0.139 221.7));
}

:root[data-theme="dark"] {
    /* Auf fast schwarzem Grund darf der Schimmer etwas mehr tragen. */
    --sf-brand-glow: oklch(60.3% 0.230 20.9 / 0.26);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sf-brand-glow: oklch(60.3% 0.230 20.9 / 0.26);
    }
}