/* =========================================================
   PSS Premium Smart Solution — Design Tokens
   Alle CI-Variablen, Themes, Typo-Skala, Spacing.
   Geändert wird hier zentral, nirgendwo sonst Hardcoded-Farben.
   ========================================================= */

:root {
  /* -----------------------------------------------------
     1. Basis-Farbpalette (PSS CI)
     ----------------------------------------------------- */
  --ink:           #0E1116;   /* Primär dunkel — Hero, Footer */
  --charcoal:      #1A1F26;   /* Sekundär dunkel */
  --off-white:     #F5F4F0;   /* Warmer Cream-Hintergrund */
  --pure-white:    #FFFFFF;
  --mid-grey:      #6B6F76;   /* Sekundärer Text */
  --hairline:      rgba(14, 17, 22, 0.12);  /* Borders auf Hell */
  --hairline-on-dark: rgba(245, 244, 240, 0.14); /* Borders auf Dunkel */

  /* Akzent: Royal Blue */
  --royal-blue:        #1B3A6B;   /* Primär-Akzent */
  --royal-blue-light:  #2A5294;   /* Hover, Highlights */
  --royal-blue-deep:   #0F2447;   /* Tieferer Background */
  --royal-blue-tint:   #E8EEF7;   /* Helle Sektion-Backgrounds */
  --royal-blue-tint-2: #D6E0F0;   /* Stripes / News-Cover */
  --royal-blue-soft:   #7B9CD1;   /* Light auf Dunkel — Italic-Akzent */
  --cream:             #EFEDE6;   /* Wärmerer Cream-Hintergrund */
  --status-green:      #5EE6A1;   /* System-Status, Live-Punkt */

  /* Status (sparsam einsetzen) */
  --success:  #2E7D5A;
  --warning:  #C97B1F;
  --error:    #B33A3A;

  /* -----------------------------------------------------
     2. Theme-Variablen — werden vom Theme-Switcher geändert
     Defaults = Hero-Theme (ink)
     ----------------------------------------------------- */
  --c-bg:        var(--ink);
  --c-fg:        var(--off-white);
  --c-fg-muted:  rgba(245, 244, 240, 0.62);
  --c-accent:    var(--royal-blue-light);
  --c-accent-2: var(--royal-blue-tint);
  --c-border:    var(--hairline-on-dark);
  --c-card-bg:   var(--charcoal);

  /* -----------------------------------------------------
     3. Typografie
     ----------------------------------------------------- */
  --font-display: 'Manrope', 'Inter Display', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Skala (clamp = responsive ohne media queries) */
  --fs-eyebrow:  clamp(0.72rem, 0.7rem + 0.2vw, 0.82rem);
  --fs-body-sm:  clamp(0.86rem, 0.82rem + 0.2vw, 0.94rem);
  --fs-body:     clamp(1rem,    0.95rem + 0.25vw, 1.12rem);
  --fs-body-lg:  clamp(1.12rem, 1.05rem + 0.4vw,  1.32rem);
  --fs-h6:       clamp(1.18rem, 1.10rem + 0.4vw,  1.40rem);
  --fs-h5:       clamp(1.40rem, 1.20rem + 0.8vw,  1.80rem);
  --fs-h4:       clamp(1.80rem, 1.40rem + 1.6vw,  2.60rem);
  --fs-h3:       clamp(2.20rem, 1.60rem + 2.4vw,  3.40rem);
  --fs-h2:       clamp(2.80rem, 2.00rem + 3.5vw,  4.80rem);
  --fs-h1:       clamp(3.60rem, 2.40rem + 5.5vw,  7.20rem);
  --fs-display:  clamp(4.20rem, 2.60rem + 7.5vw,  9.60rem);  /* Hero, Mega-CTA */

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.4;
  --lh-loose:   1.6;

  --ls-tight:   -0.04em;   /* Headlines */
  --ls-mid:     -0.02em;   /* Body Lead */
  --ls-mono:     0.10em;   /* Eyebrows */

  /* -----------------------------------------------------
     4. Spacing-Skala (auf 4 px / 0.25rem Basis)
     ----------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;
  --space-12: 16rem;

  /* Section-Padding (vertikal) — dasselbe Rhythmus-System */
  --section-py: clamp(5rem, 8vw, 10rem);

  /* Container-Width */
  --container-max: 1280px;
  --container-px:  clamp(1.25rem, 3vw, 2.5rem);

  /* -----------------------------------------------------
     5. Border-Radius-Skala
     ----------------------------------------------------- */
  --r-1:   4px;
  --r-2:   8px;
  --r-3:   12px;
  --r-4:   16px;
  --r-5:   24px;
  --r-6:   32px;
  --r-pill: 999px;

  /* -----------------------------------------------------
     6. Shadows / Elevations (zurückhaltend, premium)
     ----------------------------------------------------- */
  --shadow-sm: 0 2px 6px rgba(14, 17, 22, 0.06);
  --shadow-md: 0 6px 20px rgba(14, 17, 22, 0.08);
  --shadow-lg: 0 18px 60px rgba(14, 17, 22, 0.10);
  --shadow-blue: 0 14px 40px rgba(27, 58, 107, 0.22);

  /* -----------------------------------------------------
     7. Easings & Transitions
     ----------------------------------------------------- */
  --ease-quart:  cubic-bezier(0.59, 0.06, 0.10, 1);
  --ease-out:    cubic-bezier(0.20, 0.80, 0.20, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.20, 1);

  --t-fast: 0.2s;
  --t-mid:  0.4s;
  --t-slow: 0.6s;
  --t-color: 0.6s;

  /* -----------------------------------------------------
     8. Layout-Helfer
     ----------------------------------------------------- */
  --header-h: 80px;
  --z-base:    1;
  --z-overlay: 50;
  --z-header:  60;
  --z-modal:   80;
  --z-toast:   90;
}

/* =========================================================
   Theme-Definitionen — werden per data-theme aktiviert
   Body-Übergang in main.css cross-faded automatisch.
   ========================================================= */

/* INK — dunkel (Hero, Kunden, Footer) */
[data-theme="ink"] {
  --c-bg:        var(--ink);
  --c-fg:        var(--off-white);
  --c-fg-muted:  rgba(245, 244, 240, 0.62);
  --c-accent:    var(--royal-blue-soft);  /* helleres Blau auf Dunkel besser lesbar */
  --c-accent-2: var(--royal-blue);
  --c-border:    var(--hairline-on-dark);
  --c-card-bg:   var(--charcoal);
}

/* TINT — sehr helles Royal-Blue-Hintergrundlicht */
[data-theme="tint"] {
  --c-bg:        var(--royal-blue-tint);
  --c-fg:        var(--ink);
  --c-fg-muted:  rgba(14, 17, 22, 0.62);
  --c-accent:    var(--royal-blue-deep);
  --c-accent-2: var(--royal-blue);
  --c-border:    var(--hairline);
  --c-card-bg:   var(--pure-white);
}

/* DEEP — tiefes Royal-Blue (Drei Säulen, QuickStaff, Mega-CTA) */
[data-theme="deep"] {
  --c-bg:        var(--royal-blue-deep);
  --c-fg:        var(--off-white);
  --c-fg-muted:  rgba(245, 244, 240, 0.65);
  --c-accent:    var(--royal-blue-soft);
  --c-accent-2: var(--royal-blue-tint);
  --c-border:    rgba(232, 238, 247, 0.16);
  --c-card-bg:   rgba(255, 255, 255, 0.06);
}

/* CREAM — warmes Off-White (Smart Tech, News) */
[data-theme="cream"] {
  --c-bg:        var(--off-white);
  --c-fg:        var(--ink);
  --c-fg-muted:  rgba(14, 17, 22, 0.60);
  --c-accent:    var(--royal-blue);
  --c-accent-2: var(--royal-blue-deep);
  --c-border:    var(--hairline);
  --c-card-bg:   var(--pure-white);
}

/* WHITE — reines Weiß (Konfigurator, Cards-Backgrounds) */
[data-theme="white"] {
  --c-bg:        var(--pure-white);
  --c-fg:        var(--ink);
  --c-fg-muted:  rgba(14, 17, 22, 0.58);
  --c-accent:    var(--royal-blue);
  --c-accent-2: var(--royal-blue-deep);
  --c-border:    var(--hairline);
  --c-card-bg:   var(--off-white);
}

/* =========================================================
   Reduced Motion — Animationen ausschalten/dezenter
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0s;
    --t-mid:   0s;
    --t-slow:  0s;
    --t-color: 0.2s;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
    scroll-behavior: auto !important;
  }
}