/* ============================================================
   carelogic Styleguide · Design-Tokens (Web)
   Gilt für alle Web-Anwendungen (ASP.NET MVC, Blazor, statisches
   HTML). Referenz-Umsetzung: carelogic Kundencenter.

   Grundlage sind die carelogic Gestaltungsrichtlinien v1.0
   (Oktober 2026): Primärfarbe #116799, Sekundärfarbe #7DB2C1,
   Weiß als Standardhintergrund, Open Sans, ca. 10 px Radius.

   Einbinden VOR carelogic-controls.css. Die Schrift- und
   Bildpfade sind relativ zu dieser Datei: die Ordner fonts/ und
   img/ gehören daneben.

   Dark-Mode: Klasse "cl-dark" auf <html> (und <body>) – das
   übernimmt carelogic-theme.js samt Hell / Dunkel / System.
   ============================================================ */

/* ================= Schrift =================
   Open Sans, lokal eingebunden – kein Aufruf bei Google Fonts
   (Datenschutz). Lizenz: SIL OFL, liegt neben den Dateien. */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/open-sans/OpenSans-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
}

/* ================= Hell (Standard) ================= */
:root {
    /* ----- Marke ----- */
    --cl-brand: #116799;            /* Primärfarbe: Schrift, Überschriften, Buttons, Icons */
    --cl-brand-pressed: #0D5379;    /* abgeleitet: Hover/Pressed der Primärfarbe */
    --cl-brand-soft: #D1E1E7;       /* Kachelton; Primärschrift darauf */
    --cl-brand-2: #7DB2C1;          /* Sekundärfarbe: Akzentflächen, Labels auf Weiß */

    /* ----- Fokus & Auswahl (in der Primärfarbe, keine Zusatzfarbe) ----- */
    --cl-accent: #116799;
    --cl-accent-soft: #D1E1E7;

    /* ----- Flächen ----- */
    --cl-bg: #F7F7F8;               /* abgeleitet: Seitengrund leicht grau, damit
                                       sich die weißen Karten abheben */
    --cl-surface: #FFFFFF;          /* Karten, Dialoge, Kopfzeile */
    --cl-rail: #F3F3F4;             /* Hellgrau: Seitenleiste, Flächen zur Gliederung */
    --cl-fill: #F3F3F4;             /* Eingabefelder, Hover */
    --cl-fill-2: #E7ECEF;           /* abgeleitet: Segmente, Zähler */

    /* ----- Linien ----- */
    --cl-stroke: #D5DEE4;           /* Linien, Rahmen */
    --cl-stroke-2: #BCCAD3;         /* abgeleitet: kräftiger (Hover, Kästchen) */

    /* ----- Schrift ----- */
    --cl-ink: #4A5964;              /* Fließtext Grau */
    --cl-ink-2: #61707A;            /* abgeleitet: Nebentext (4,7:1 auf Hellgrau) */
    --cl-ink-3: #8A97A1;            /* abgeleitet: Hinweise, Metadaten */

    /* ----- Status (kräftig = Schrift/Icon, soft = Fläche) ----- */
    --cl-blue: #116799;             /* Info – bewusst die Primärfarbe */
    --cl-blue-soft: #D1E1E7;
    --cl-amber: #B0700F;            /* Warnung, wartet */
    --cl-amber-soft: #FBEBD3;
    --cl-red: #C9352F;              /* Fehler, hohe Priorität */
    --cl-red-soft: #FBE4E3;
    --cl-green: #0E7D58;            /* Erfolg, erledigt */
    --cl-green-soft: #DEF3EA;
    --cl-purple: #6A48E0;           /* Geplant, interner Bereich */
    --cl-purple-soft: #EBE6FD;

    /* ----- Kategoriefarben der acht Produktbereiche -----
       Nur als Kennfarbe eines Fachbereichs (z. B. farbiger Balken),
       nie für Fehler oder Erfolg; Schrift darauf ist weiß. */
    --cl-cat-abrechnung: #875268;
    --cl-cat-aussendienst: #71819D;
    --cl-cat-buchhaltung: #269839;
    --cl-cat-innendienst: #CD6B28;
    --cl-cat-lager: #265D47;
    --cl-cat-qm: #96C11C;
    --cl-cat-vertrag: #5A3683;
    --cl-cat-verwaltung: #C83022;

    /* ----- Radien -----
       Karten, Kacheln, Akzentflächen ca. 10 px; kleine Labels ca. 4 px.
       Buttons teilen sich den Radius mit den Eingabefeldern (r-ctrl). */
    --cl-r-card: 10px;
    --cl-r-tile: 10px;
    --cl-r-ctrl: 10px;
    --cl-r-label: 4px;
    --cl-r-pill: 999px;

    /* ----- Schatten ----- */
    --cl-sh: 0 1px 2px rgba(20,30,40,.05), 0 6px 20px rgba(20,30,40,.05);
    --cl-sh-pop: 0 12px 24px rgba(15,25,35,.16), 0 34px 80px rgba(15,25,35,.24);

    /* ----- Schrift ----- */
    --cl-font: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, system-ui, sans-serif;
    --cl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --cl-fs-h1: 32px;               /* Startseite, Anmeldung – Bold */
    --cl-fs-h2: 24px;               /* Seitentitel – Bold */
    --cl-fs-h3: 18px;               /* Karten- und Dialogtitel – Bold */
    --cl-fs-text: 15px;             /* Fließtext – Regular */
    --cl-fs-small: 13px;            /* Hinweise, Fußzeilen */

    /* ----- Diagramme -----
       Eine Datenreihe je Diagramm, deshalb eine Farbe: das Markenblau. */
    --cl-viz-1: #116799;

    /* ----- Wellenmotiv -----
       Nur Schatten und Linien des Originals, der helle Grund ist
       transparent: auf Weiß ergibt die Ebene exakt das Original.
       Liegt immer über einer Hintergrundfarbe; auf dunklem Grund
       zweimal gelegt (doppelte Stärke). */
    --cl-wave: url("img/wellenmotiv.png");

    color-scheme: light;
}

/* ================= Dunkel =================
   Die Richtlinien kennen keinen Dark-Mode – das sind eigene Werte.
   Neutrales Schwarz ohne Blaustich; jede Ebene eine Stufe heller als
   die darunter (Grund < Leiste < Karte < Füllung < Linie). Die
   Primärfarbe ist aufgehellt, weil #116799 als Schrift auf fast
   schwarzem Grund zu dunkel wäre. */
.cl-dark {
    --cl-brand: #3BAAEA;
    --cl-brand-pressed: #2C93CF;
    --cl-brand-soft: #123246;
    --cl-brand-2: #7DB2C1;
    --cl-accent: #3BAAEA;
    --cl-accent-soft: #0F2E42;
    --cl-bg: #121212;
    --cl-surface: #1C1C1C;
    --cl-rail: #161616;
    --cl-fill: #232323;
    --cl-fill-2: #2A2A2A;
    --cl-stroke: #2F2F2F;
    --cl-stroke-2: #3D3D3D;
    --cl-ink: #EDEDED;
    --cl-ink-2: #A9A9A9;
    --cl-ink-3: #7C7C7C;
    --cl-blue: #3BAAEA;
    --cl-blue-soft: #0F2E42;
    --cl-amber: #F0A23E;
    --cl-amber-soft: #3E3220;
    --cl-red: #F0605B;
    --cl-red-soft: #3E2726;
    --cl-green: #2BB585;
    --cl-green-soft: #173A31;
    --cl-purple: #9B82F5;
    --cl-purple-soft: #2C2942;
    --cl-viz-1: #3D9BE0;            /* eine Stufe tiefer als --cl-brand: 3,8:1 auf --cl-surface */
    --cl-sh: 0 1px 2px rgba(0,0,0,.22), 0 6px 20px rgba(0,0,0,.26);
    color-scheme: dark;
}