/* ==========================================================================
   theme.css - Die einzige Datei mit Gestaltungswerten.

   Quelle der Markenwerte:
   knowledge/design/sv-ci-facts.md (aus SV_CD_Manual_Band1.pdf)

   BELEGTE CI-WERTE sind unten mit [CI] gekennzeichnet.
   VORSCHLAEGE sind mit [VORSCHLAG] gekennzeichnet. Das SV-Manual definiert
   fuer den Online-Bereich weder Radien, Abstaende, Schriftgroessen noch
   einen Dark Mode und verweist auf einen separaten Styleguide, der nicht
   vorliegt. Diese Werte sind daher ausdruecklich zur Freigabe vorgelegt und
   nicht eigenmaechtig zum Standard erklaert.
   ========================================================================== */

:root {
  /* ---------- MARKE ------------------------------------------------------ */

  /* [CI] SV Rot - RGB 238/0/0 - #ee0000 */
  --primary-h: 0;
  --primary-s: 100%;
  --primary-l: 47%;

  --color-primary: #ee0000;
  --color-primary-soft: hsl(0 100% 47% / 0.10);
  --color-primary-contrast: #ffffff;

  /* [CI] Dunkelgrau 2 aus dem erweiterten Grauspektrum fuer elektronische Medien.
     Bewusst KEINE der dokumentierten Sekundaerfarben: das Manual erlaubt sie
     nur selten, nie grossflaechig und nur nach Abstimmung mit dem Marketing. */
  --color-secondary: #444444;

  /* Das Logo traegt dunkle Schrift und braucht in jedem Modus eine helle
     Flaeche. Bewusst kein Flaechen-Token, sondern ein eigener Wert - er
     bleibt im Dark Mode unveraendert. */
  --color-logo-plate: #ffffff;

  /* ---------- FLAECHEN UND TEXT ------------------------------------------ */
  /* Alle Werte [CI] aus dem dokumentierten Grauspektrum. */

  --color-bg: #f0f0f0;            /* Hellgrau */
  --color-surface: #ffffff;       /* Weiss */
  --color-surface-sunken: #e9e9e9;/* Grau 1 */
  --color-border: #d9d9d9;        /* Grau 3 */
  --color-text: #000000;          /* Schwarz */
  --color-text-muted: #666666;    /* Dunkelgrau 1 */

  /* ---------- SIGNALFARBEN ----------------------------------------------- */
  /*
   * [VORSCHLAG] Das Manual kennt keine Signalfarben fuer Auf- und Abwaerts-
   * Veraenderungen. Verwendet werden zwei dokumentierte Sekundaerfarben:
   * Dunkelgruen #009864 und Rot #ee0000, beide nur als kleine Textmarkierung.
   *
   * ZUR ABSTIMMUNG: SV Rot ist gleichzeitig die Markenfarbe. Es doppelt hier
   * als Warnsignal. Falls das Marketing das nicht mittraegt, ist hier eine
   * eigene Signalfarbe zu setzen - nur an dieser Stelle.
   */
  --color-positive: #009864;
  --color-negative: #ee0000;

  /* ---------- TYPOGRAFIE -------------------------------------------------- */
  /*
   * [CI] Standardschrift ist Sparkasse Rg, werbliche Headlines Sparkasse Head.
   * Die Schriftdateien wurden nicht bereitgestellt. Das Manual nennt fuer
   * Internet und E-Mail ausdruecklich Arial Regular und Arial Bold als
   * Ersatzschrift - genau die ist hier gesetzt.
   *
   * Liegen die Sparkassen-Webfonts spaeter vor, werden sie hier vorangestellt.
   */
  --font-heading: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---------- FORM -------------------------------------------------------- */
  /* [VORSCHLAG] Radien und Abstaende sind im Manual nicht definiert.
     Bewusst zurueckhaltend gewaehlt, passend zur sachlichen Anmutung. */

  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 6px;
  --spacing-unit: 8px;

  /* ---------- ABGELEITETE WERTE (nicht anfassen) -------------------------- */

  --space-1: calc(var(--spacing-unit) * 0.5);
  --space-2: var(--spacing-unit);
  --space-3: calc(var(--spacing-unit) * 1.5);
  --space-4: calc(var(--spacing-unit) * 2);
  --space-5: calc(var(--spacing-unit) * 3);
  --space-6: calc(var(--spacing-unit) * 4);
  --space-8: calc(var(--spacing-unit) * 6);

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;
  --text-3xl: 2.75rem;

  /* ---------- CHARTSKALA -------------------------------------------------- */
  /*
   * Abgeleitet aus SV Rot, im Wechsel mit dem dokumentierten Grauspektrum.
   *
   * Warum kein Farbfaecher ueber den Farbkreis: aus Rot wuerden dabei Orange,
   * Magenta und Pink entstehen. Das waere ausserhalb der CI. Stattdessen
   * wechseln sich Rotabstufungen und belegte Grautoene ab - benachbarte
   * Datenreihen bleiben dadurch klar unterscheidbar.
   *
   * In der Anwendung liegen nie mehr als drei Farben gleichzeitig in einem
   * Diagramm; die Zeitreihe nutzt hoechstens zwei.
   */
  --chart-1: #ee0000;                    /* [CI] SV Rot */
  --chart-2: #444444;                    /* [CI] Dunkelgrau 2 */
  --chart-3: hsl(0 58% 64%);             /* SV Rot aufgehellt */
  --chart-4: #999999;                    /* [CI] Grau 6 */
  --chart-5: hsl(0 82% 30%);             /* SV Rot abgedunkelt */
  --chart-6: #cccccc;                    /* [CI] Grau 4 */

  --chart-grid: #e3e3e3;                 /* [CI] Grau 2 */
  --chart-axis-text: #666666;            /* [CI] Dunkelgrau 1 */
  --chart-compare: #999999;              /* [CI] Grau 6 */

  --skeleton-base: #e3e3e3;              /* [CI] Grau 2 */
  --skeleton-shine: #f0f0f0;             /* [CI] Hellgrau */

  --focus-ring: 0 0 0 3px hsl(0 100% 47% / 0.35);
  --elevation: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* ==========================================================================
   Dark Mode

   [VORSCHLAG] Das SV-Manual definiert keinen Dark Mode. Die Flaechen sind aus
   dem dokumentierten Grauspektrum nach unten fortgeschrieben, die Markenfarbe
   bleibt unveraendert SV Rot. Reines #ee0000 erreicht auf dunklem Grund
   ausreichenden Kontrast und wird deshalb nicht verfaelscht.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #141414;
    --color-surface: #1e1e1e;
    --color-surface-sunken: #2a2a2a;
    --color-border: #3a3a3a;
    --color-text: #f0f0f0;          /* [CI] Hellgrau */
    --color-text-muted: #999999;    /* [CI] Grau 6 */

    --color-primary-soft: hsl(0 100% 47% / 0.18);
    --color-positive: #00c583;

    --chart-2: #cccccc;             /* [CI] Grau 4 - auf Dunkel getauscht */
    --chart-4: #999999;             /* [CI] Grau 6 */
    --chart-6: #666666;             /* [CI] Dunkelgrau 1 */
    --chart-grid: #333333;
    --chart-axis-text: #999999;
    --chart-compare: #777777;

    --skeleton-base: #2a2a2a;
    --skeleton-shine: #363636;
    --elevation: 0 1px 2px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  --color-bg: #141414;
  --color-surface: #1e1e1e;
  --color-surface-sunken: #2a2a2a;
  --color-border: #3a3a3a;
  --color-text: #f0f0f0;
  --color-text-muted: #999999;

  --color-primary-soft: hsl(0 100% 47% / 0.18);
  --color-positive: #00c583;

  --chart-2: #cccccc;
  --chart-4: #999999;
  --chart-6: #666666;
  --chart-grid: #333333;
  --chart-axis-text: #999999;
  --chart-compare: #777777;

  --skeleton-base: #2a2a2a;
  --skeleton-shine: #363636;
  --elevation: 0 1px 2px rgb(0 0 0 / 0.5);
}