/* ============================================================
   QRENA Design System – Warm Ember
   Lädt nach landing.css → überschreibt Design-Tokens
   Stand: 2026-03
============================================================ */

/* Fonts: lokal gehostet via fonts/fonts.css (TDDDG §25 konform) */
/* Space Grotesk (Display) + Inter (Body) – bereits in fonts/fonts.css geladen */

:root {
  /* ── BRAND ─────────────────────────────────── */
  --orange-400:    #fb923c;
  --orange-500:    #f97316;       /* Primary brand CTA */
  --orange-600:    #ea6c0a;
  --orange-glow:   rgba(249, 115, 22, 0.25);
  --orange-tint:   rgba(249, 115, 22, 0.07);
  --orange-border: rgba(249, 115, 22, 0.30);

  /* ── SECONDARY (Indigo – strukturell, kein CTA) */
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-glow: rgba(99, 102, 241, 0.15);

  /* ── BACKGROUNDS ───────────────────────────── */
  --bg:            #0f172a;
  --bg-elevated:   #1a2540;       /* Cards, etwas wärmer als alt */
  --bg-card:       rgba(26, 37, 64, 0.65);
  --bg-warm-tint:  rgba(249, 115, 22, 0.04);

  /* ── TEXT ──────────────────────────────────── */
  --text:           #f1f5f9;      /* Aufgehellt für besseren Kontrast */
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  /* ── SEMANTIC ──────────────────────────────── */
  --success:  #22c55e;
  --error:    #ef4444;
  --border:   rgba(148, 163, 184, 0.14);

  /* ── BRAND-VARIABLEN (landing.css überschreiben) */
  --brand:       #f97316;        /* War: #3b82f6 → orange */
  --brand-light: #fb923c;
  --brand-dark:  #ea6c0a;
  --accent:      #f97316;        /* War: neon #a3ff4f → orange */

  /* ── TYPOGRAPHY ────────────────────────────── */
  /* Lokal gehostete Fonts (kein externer Request, TDDDG-konform) */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 6vw, 4rem);    /* 40–64px: Hero H1 */
  --fs-h1:      clamp(2rem, 5vw, 3rem);       /* 32–48px */
  --fs-h2:      clamp(1.75rem, 4vw, 2.5rem);  /* 28–40px */
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);  /* 20–24px */
  --fs-body:    1.0625rem;                     /* 17px */
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* ── ELEVATION ─────────────────────────────── */
  --shadow-orange-sm: 0 4px 16px rgba(249, 115, 22, 0.25);
  --shadow-orange-md: 0 8px 32px rgba(249, 115, 22, 0.40);
  --shadow-card:      0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ── BASE OVERRIDES ──────────────────────────── */
body.landing-page {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  background: var(--bg);

  /* Subtiler Warm-Glow im Hero-Bereich */
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(249,115,22,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(99,102,241,0.04) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ── HEADINGS ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}