/* ============================================================
   Syrcon Corporate Design — Design Tokens
   Farbwerte aus dem Syrcon Design-Manual (Jan. 2017).
   Einbinden VOR syrcon-ui.css.
   Framework-agnostisch: plain CSS, Flask/Jinja, React, Next.js …
   ============================================================ */

:root {
  /* ---- Markenblau (Syrcon Design-Manual) ----
     Primärdefinition laut Manual sind die CMYK-Werte; Hex hier als Web-Näherung. */
  --syr-blue-900: #11306E;   /* Dunkelblau · Pantone 2757 · CMYK 100/80/0/35 · Primär */
  --syr-blue-700: #2A4689;   /* Mittelblau · 80% 2757     · CMYK 90/70/0/20  · Sekundär */
  --syr-blue-300: #86A9D9;   /* Hellblau 2 · CMYK 52/27/0/0 · Abstufung */
  --syr-blue-200: #A6C4E8;   /* Hellblau   · Pantone 278   · CMYK 39/16/0/0  · Abstufung */
  --syr-blue-050: #E7F0F9;   /* sehr helles Blau · dezente Flächen */

  /* ---- Akzent-Rollen ---- */
  --syr-accent:        var(--syr-blue-900);           /* Primär: Buttons, CTAs, Icons */
  --syr-accent-strong: #0A2352;                       /* dunkler: Hover / Active */
  --syr-accent-2:      var(--syr-blue-700);           /* Sekundär-Akzent / Links */
  --syr-accent-soft:   var(--syr-blue-300);           /* helles Blau: Akzent auf Dunkel, Disabled */
  --syr-accent-tint:   rgba(17, 48, 110, 0.08);       /* 8%-Tint: Chips, Soft-Flächen */
  --syr-accent-tint-2: rgba(17, 48, 110, 0.14);       /* kräftiger (Hover auf Tint) */

  /* ---- Neutrale Farben (kühl, zum Blau passend) ---- */
  --syr-ink:      #14213D;   /* kühles Fast-Schwarz: Headlines, dunkle Elemente */
  --syr-ink-soft: #45526B;   /* Sekundärtext auf hell */
  --syr-muted:    #8592AA;   /* Tertiär / Captions / Placeholder */
  --syr-white:    #FFFFFF;
  --syr-mist:     #F4F8FC;   /* dezente Sektionsfläche */
  --syr-mist-deep:#E7F0F9;   /* wärmere/tiefere helle Fläche, Gradient-Ende */
  --syr-border:   #DDE6F1;   /* Standard-Rahmen (blau-grau) */
  --syr-border-dark: rgba(255, 255, 255, 0.14);

  /* ---- Rollen: Flächen (theme-abhängig) ---- */
  --syr-bg:             var(--syr-white);
  --syr-surface:        var(--syr-white);
  --syr-surface-subtle: var(--syr-mist);
  --syr-bg-dark:        var(--syr-blue-900);
  --syr-hero-gradient:  linear-gradient(180deg, #FFFFFF 0%, var(--syr-mist-deep) 100%);

  /* ---- Rollen: Text (theme-abhängig) ---- */
  --syr-text:      var(--syr-ink);
  --syr-text-soft: var(--syr-ink-soft);
  --syr-text-muted:var(--syr-muted);

  /* ---- Rollen: Linien & Akzent-Text ---- */
  --syr-border-role: var(--syr-border);
  --syr-accent-text: var(--syr-accent);   /* Eyebrows & Links – pro Theme kontraststark */

  /* ---- Rollen: Kontrast-Button (invertierte Fläche) ---- */
  --syr-contrast-bg:   var(--syr-blue-900);
  --syr-contrast-text: var(--syr-white);

  /* ---- Semantische Farben (Status/Alerts) ---- */
  --syr-success: #1F7A4D;
  --syr-warning: #B6791B;
  --syr-danger:  #C0392B;
  --syr-info:    #2B6CB0;

  /* ---- Typografie ---- */
  --syr-font-head: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Headlines (DIN-nah) */
  --syr-font:      "Inter",  system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Fließtext */
  --syr-fw-regular: 400;
  --syr-fw-medium:  500;
  --syr-fw-semibold:600;
  --syr-fw-bold:    700;
  --syr-fw-extra:   800;

  /* Type-Scale */
  --syr-text-eyebrow: 0.8125rem;  /* 13px */
  --syr-text-body:    1rem;       /* 16px */
  --syr-text-lg:      1.125rem;   /* 18px */
  --syr-h3:           1.5rem;     /* 24px */
  --syr-h2:           2.25rem;    /* 36px */
  --syr-h1:           3.5rem;     /* 56px */

  --syr-tracking-eyebrow: 0.16em; /* weites Letterspacing für Uppercase-Labels */
  --syr-tracking-tight:  -0.02em;

  /* ---- Radius (korporativ-modern, moderat gerundet) ---- */
  --syr-radius-sm:  8px;
  --syr-radius:     12px;   /* Cards, Buttons */
  --syr-radius-lg:  18px;
  --syr-radius-pill: 9999px;

  /* ---- Schatten (kühl, dezent) ---- */
  --syr-shadow-sm: 0 1px 2px rgba(17, 48, 110, 0.05);
  --syr-shadow:    0 6px 20px rgba(17, 48, 110, 0.08);
  --syr-shadow-lg: 0 16px 44px rgba(17, 48, 110, 0.13);

  /* ---- Spacing-Skala ---- */
  --syr-space-1: 0.25rem;
  --syr-space-2: 0.5rem;
  --syr-space-3: 0.75rem;
  --syr-space-4: 1rem;
  --syr-space-6: 1.5rem;
  --syr-space-8: 2rem;
  --syr-space-12: 3rem;
  --syr-space-16: 4rem;
  --syr-space-24: 6rem;

  /* ---- Layout ---- */
  --syr-container: 1200px;
  --syr-container-narrow: 820px;

  /* ---- Motion ---- */
  --syr-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --syr-dur:  180ms;

  color-scheme: light;
}

/* ============================================================
   DARK MODE
   Aktivieren: <html data-theme="dark">.
   Markenblau bleibt erhalten; Flächen/Text/Linien kippen ins Kühle-Dunkle.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --syr-bg:             #0C1424;   /* tiefes, kühles Nachtblau */
  --syr-surface:        #142138;   /* erhöhte Fläche: Cards, Inputs */
  --syr-surface-subtle: #101B2E;   /* dezente Sektionsfläche */

  --syr-text:      #EAF1FA;        /* kühles Off-White */
  --syr-text-soft: rgba(234, 241, 250, 0.72);
  --syr-text-muted:#8A97AE;

  --syr-border:      rgba(255, 255, 255, 0.12);
  --syr-border-role: var(--syr-border);

  /* Akzent-Text heller für Lesbarkeit auf Dunkel */
  --syr-accent-text: var(--syr-blue-200);

  /* Kontrast-Fläche invertiert: hell auf dunkel */
  --syr-contrast-bg:   var(--syr-mist-deep);
  --syr-contrast-text: var(--syr-blue-900);

  --syr-hero-gradient: linear-gradient(180deg, #101B2E 0%, #0C1424 100%);

  --syr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --syr-shadow:    0 6px 20px rgba(0, 0, 0, 0.45);
  --syr-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55);
}