/* ============================================================
   SOLAREL — Brand Tokens
   Quelle der Wahrheit: CI Manual Edition 01 (Draft 27.05.2026)
   klimesch-studio/skills/reicht/solarel/ci-manual/index.html
   Alle Styles der Homepage importieren Farben/Typo NUR von hier.
   ============================================================ */

/* ---------- Webfonts (self-hosted, DSGVO-konform) ---------- */

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/saira-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/saira-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/saira-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/saira-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root {
  /* ---------- Farben (CI Manual, verbindlich) ---------- */
  --solarel-bright: #0699F8;  /* Primärakzent. Auf Weiß NUR Grafik, nie Text (2,9:1). */
  --solarel-deep:   #002F60;  /* Text-Akzent + CTA-Fläche auf Hell (12,6:1 auf Weiß). */
  --reicht-sand:    #C9A876;  /* Sparsam. Einzelne Akzent-Momente, nie Fläche. */
  --paper:          #F6F5F1;  /* Heller Seitengrund. */
  --white:          #FFFFFF;
  --anthrazit:      #1A1A1A;  /* Fließtext auf Hell. */
  --ink-dark:       #010C1B;  /* Dunkler Bühnen-Grund (Hero, Film, Footer). */
  --stone:          #DCDAD0;  /* Hairlines/Rahmen auf Hell. */
  --slate:          #7A7A75;  /* Gedämpfter Text auf Hell (4,7:1 auf Weiß). */
  --tint-sky:       #EFF7FC;  /* Leichte Blau-Tönung für Wechselflächen. */

  /* Abgeleitete Verwendungs-Tokens (mappen NUR auf CI-Farben oben) */
  --bg-page:        var(--paper);
  --bg-stage:       var(--ink-dark);
  --text-strong:    var(--anthrazit);
  /* Gedämpfter TEXT = Anthrazit mit Alpha (Slate erreicht als Fließtext
     keine 4,5:1 — Slate bleibt Grafik-/Hairline-Ton, nie Text) */
  --text-muted:     rgba(26, 26, 26, 0.74);
  --text-on-dark:   var(--white);
  --text-muted-on-dark: rgba(255, 255, 255, 0.72);
  --accent-text:    var(--solarel-deep);   /* Akzent als Text auf Hell */
  --accent-graphic: var(--solarel-bright); /* Akzent als Grafik/Linie  */
  --hairline:       var(--stone);
  --hairline-on-dark: rgba(255, 255, 255, 0.18);

  /* ---------- Typografie ---------- */
  --font-display: 'Saira', 'Inter', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* Fluide Größen — ein Gedanke pro Viewport braucht große, ruhige Typo */
  --text-hero:    clamp(2.625rem, 7.5vw, 6.25rem);
  --text-h2:      clamp(2rem, 4.6vw, 3.75rem);
  --text-h3:      clamp(1.3rem, 2.4vw, 1.625rem);
  --text-lead:    clamp(1.125rem, 1.55vw, 1.375rem);
  --text-body:    1.0625rem;
  --text-small:   0.875rem;
  --text-eyebrow: 0.8125rem;
  --text-stat:    clamp(2.25rem, 4.5vw, 3.5rem);

  --leading-tight: 1.04;
  --leading-head:  1.12;
  --leading-body:  1.6;

  --track-display-tight: -0.022em; /* Saira groß */
  --track-display:       -0.018em;
  --track-body:          -0.01em;
  --track-eyebrow:        0.16em;  /* JetBrains Mono Eyebrows, uppercase */

  /* ---------- Raster & Raum ---------- */
  --container:      75rem;   /* 1200px */
  --container-wide: 90rem;   /* 1440px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(5.5rem, 14vh, 10rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  --radius-s: 0.375rem;
  --radius-m: 0.875rem;
  --radius-l: 1.5rem;

  /* ---------- Motion (erklärt, nicht dekoriert) ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick: 0.3s;
  --dur-reveal: 0.8s;

  /* ---------- Ebenen ---------- */
  --shadow-card: 0 1px 2px rgba(1, 12, 27, 0.05), 0 12px 32px rgba(1, 12, 27, 0.08);
  --shadow-stage: 0 24px 80px rgba(1, 12, 27, 0.35);
}