/* ==========================================================================
   Southframe — Design Tokens
   Einzige Quelle der Wahrheit für Farben, Abstände, Typografie, Motion.
   Werte gemäß Projektbrief §2 / §37 (harmonisiert, siehe README).
   ========================================================================== */

:root {
  /* --- Farben: Basis ----------------------------------------------------- */
  --color-bg: #fafafa;
  --color-bg-soft: #f5f5f3;
  /* Sprint 3.5 (Brand-Alignment): Black auf Styleguide-Wert #080808
     präzisiert (vorher #0a0a0a — minimale Abweichung, kein Trade-off,
     da dunkler nur den Kontrast verbessert). */
  --color-text: #080808;
  --color-muted: #6b6b6b;
  /* Border auf Styleguide-Gray200 #e2e2e0 präzisiert (vorher #e2e2e2 —
     nicht wahrnehmbarer, aber unnötiger Unterschied). */
  --color-border: #e2e2e0;

  /* --- Farben: Dark Sections ---------------------------------------------- */
  --color-dark: #080808;
  --color-dark-card: #161616;
  --color-dark-text: #f5f5f3;
  --color-dark-muted: #9c9c9c;
  --color-dark-border: #2a2a2a;

  /* --- Farben: Akzent (sparsam einsetzen, siehe §2) ----------------------- */
  --color-accent: #c5a15a;
  --color-accent-contrast: #3a2f18; /* für Text auf hellem Gold-Untergrund */

  /* Sprint 3.5: sekundäre Markengrautöne aus dem Styleguide (§5), für
     Vollständigkeit der Palette dokumentiert. --color-gray-500 NICHT für
     kleinen Fließtext verwenden (siehe --color-muted-Begründung oben,
     §6) — nur für größere Textgrößen/Grafikelemente. --color-gray-700
     aktuell ungenutzt, für spätere Verwendung vorbereitet statt neu
     erfunden zu werden, sobald ein Bedarf entsteht. */
  --color-gray-500: #737373;
  --color-gray-700: #343434;

  /* --- Feedback / Status ---------------------------------------------------
     Nur für funktionale Zustände (Formularfehler etc.), nicht dekorativ. */
  --color-success: #3f7a52;
  --color-error: #b3432b;

  /* --- Layout -------------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 800px;
  --edge-padding: 1.25rem; /* Außenabstand Mobile */

  /* --- Radius -------------------------------------------------------------- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* --- Spacing-Skala (T-Shirt-Größen, mobile Basis) ------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;
  --space-2xl: 6rem;

  /* --- Typografie ------------------------------------------------------------
     Sprint 3.5: Space Grotesk als primäre Markenschrift, lokal gehostet
     (siehe base.css für @font-face). System-Font-Stack bleibt vollständig
     als Fallback bestehen — kein Verlust der Sprint-1-Performance-Basis,
     falls die Webfont-Datei aus irgendeinem Grund nicht lädt. */
  --font-sans:
    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(2.5rem, 6.5vw + 1rem, 5.5rem);
  --fs-h2: clamp(2rem, 4vw + 1rem, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.6vw + 1rem, 1.75rem);
  --fs-lead: clamp(1.0625rem, 0.6vw + 0.9rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --ls-eyebrow: 0.12em;
  --ls-tight: -0.02em;

  /* --- Motion (siehe §30) --------------------------------------------------- */
  --duration-fast: 180ms;
  --duration-medium: 320ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* --- Sonstiges -------------------------------------------------------------- */
  --header-height: 64px;
  --z-header: 100;
  --z-mobile-nav: 200;
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04), 0 1px 1px rgba(10, 10, 10, 0.03);
  --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 20px 48px rgba(10, 10, 10, 0.12);

  /* Sprint 2: dedizierte Card-Shadow-Tokens (Brief §10) — bewusst eigene
     Namen statt --shadow-sm/md wiederzuverwenden, da Cards ein eigener,
     etwas weicherer Hover-Übergang zugewiesen ist als z. B. dem Header. */
  --shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 1px 1px rgba(10, 10, 10, 0.03);
  --shadow-card-hover: 0 14px 32px rgba(10, 10, 10, 0.10);

  /* Sprint 2: fluide Section-Vertikalabstände (Brief §5). Ersetzt die
     bisherige, breakpoint-basierte Umschaltung von --space-xl auf
     --space-2xl in responsive.css (siehe dortiger Kommentar). Ziel:
     Mobile ~64–88px, Desktop ~100–140px, ohne harte Sprünge. */
  --space-section: clamp(4rem, 3rem + 4vw, 7.5rem);

  /* Sprint 3: dedizierter Token für die Preisanzeige (Pricing-Cards),
     da dieser Wert an 3 Stellen identisch verwendet wird (Brief §17:
     keine Magic Numbers bei Mehrfachverwendung). Etwas kompakter als
     die Rohvorgabe aus dem Brief (clamp(2.5rem,10vw,4rem)), da drei
     Cards nebeneinander bei 4rem zu eng würden. */
  --fs-price: clamp(2.25rem, 5vw + 1rem, 3.25rem);
}

/* Größere Außenabstände und Header-Höhe ab Tablet/Desktop.
   Bewusst hier zentral gehalten statt verstreut in responsive.css,
   da es sich um Token-Werte handelt, keine Layout-Regeln. */
@media (min-width: 768px) {
  :root {
    --edge-padding: 2rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --edge-padding: 2.5rem;
    --header-height: 76px;
  }
}