/* ============================================================
   geoquality.ai — Design Tokens (Single Source of Truth)
   Phase 2a. Kanonische CSS Custom Properties für die SEAKT-Palette,
   Typografie, Motion, Radius, Schatten. Komponenten referenzieren
   AUSSCHLIESSLICH diese Variablen (Ausnahme: .gq-engines scope-isoliert).
   ============================================================ */
:root {
  /* Background */
  --bg-obsidian: #04050A;
  --bg-soft: #0A0D18;
  --bg-elevated: #0D1224;
  --bg-glass: rgba(12, 18, 32, 0.55);

  /* Ink / Text */
  --ink-primary: #F0EEE6;
  --ink-muted: rgba(240, 238, 230, 0.62);
  --ink-faint: rgba(240, 238, 230, 0.32);
  --ink-inverse: #04050A;

  /* Rules / Borders */
  --rule: rgba(240, 238, 230, 0.08);
  --rule-strong: rgba(240, 238, 230, 0.18);
  --rule-accent: rgba(240, 238, 230, 0.32);

  /* SEAKT Accents */
  --color-s: #5BE9DC;
  --color-e: #5B8FF9;
  --color-a: #8B5CF6;
  --color-k: #FF3D81;
  --color-t: #FFB155;
  --color-s-glow: rgba(91, 233, 220, 0.4);
  --color-e-glow: rgba(91, 143, 249, 0.4);
  --color-a-glow: rgba(139, 92, 246, 0.4);
  --color-k-glow: rgba(255, 61, 129, 0.4);
  --color-t-glow: rgba(255, 177, 85, 0.4);

  /* Holographic gradients */
  --grad-holo: conic-gradient(from 0deg,
    #5BE9DC, #5B8FF9, #8B5CF6, #FF3D81, #FFB155, #5BE9DC);
  --grad-headline: linear-gradient(110deg,
    #FF3D81 0%, #FF6B8E 35%, #FFB155 75%);
  --grad-cool: linear-gradient(135deg,
    #5BE9DC 0%, #5B8FF9 50%, #8B5CF6 100%);
  --grad-nav-scrolled: linear-gradient(to bottom,
    rgba(4,5,10,0.92), rgba(4,5,10,0.6));
  --grad-nav-transparent: linear-gradient(to bottom,
    rgba(4,5,10,0.7), rgba(4,5,10,0));

  /* Typography — Brand-Stack (konsistent mit Cinematic Hero) */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-serif-accent: Georgia, 'Times New Roman', serif;
  --tracking-tight: -0.035em;
  --tracking-display: -0.03em;
  --tracking-mono: 0.06em;
  --tracking-eyebrow: 0.18em;

  /* Motion */
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);

  /* Radius */
  --radius-pill: 100px;
  --radius-xl: 22px;
  --radius-lg: 14px;
  --radius-md: 8px;
  --radius-sm: 6px;

  /* Shadows */
  --shadow-cta: 0 8px 32px rgba(91, 233, 220, 0.2),
                0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Backdrop */
  --backdrop-blur: blur(20px) saturate(160%);

  /* Section-Rhythmus (Apple/Linear-Spacing) */
  --section-pad-y: 140px;
  --container-max: 1200px;
}

@media (max-width: 880px) {
  :root {
    --section-pad-y: 90px;
  }
}

/* ── Globale Schärfe-Optimierung (Typografie-Rendering) ── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Smooth-Scroll + Offset für den 64px-Sticky-Header (Anker landen nicht darunter) */
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Einheitlicher Premium-Fokusring (Accessibility + edler Eindruck) */
:focus-visible {
  outline: 2px solid var(--color-a, #8B5CF6);
  outline-offset: 2px;
  border-radius: 4px;
}
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.hero-headline,
.section-title,
.gq-btn {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}