/* ─────────────────────────────────────────────────────────────────
 * tokens.css — Single Source of Truth fuer Polis Coming-Soon (V1.4+)
 *
 * Aenderungen an Farben, Typo, Spacing IMMER hier. Components lesen
 * nur Variablen.
 *
 * Theme: Dark Tech-Polis. Inspiriert von matthiasmeyer.tech (electric
 * cyan, dark, technical, OS-dev-vibe). Polis-Erweiterung: 5 role-
 * specific colors (one per Buerger) als Group-Tokens.
 *
 * Brand-Bible: Dark Premium + Inter Body + Awwwards-Easing.
 * ───────────────────────────────────────────────────────────────── */

:root {
  /* ─── Background ─── */
  --bg-page:         #0a0a0b;
  --bg-soft:         #111114;
  --bg-elevated:     #18181c;
  --bg-deep:         #1f1f24;
  --bg-glass:        rgba(255, 255, 255, 0.04);
  --bg-glass-hover:  rgba(255, 255, 255, 0.08);

  /* ─── Foreground ─── */
  --fg:              #f5f5f7;
  --fg-soft:         #a1a1aa;
  --fg-dim:          #71717a;
  --fg-ghost:        #52525b;

  /* ─── Accent: Electric Cyan (Tech-Polis) ─── */
  --accent:          #00d4ff;
  --accent-soft:     #67e8f9;
  --accent-deep:     #0891b2;
  --accent-glow:     rgba(0, 212, 255, 0.18);
  --accent-glow-strong: rgba(0, 212, 255, 0.45);

  /* ─── Gold Secondary (Brand-Heritage) ─── */
  --gold:            #fbbf24;
  --gold-soft:       #fde68a;
  --gold-glow:       rgba(251, 191, 36, 0.20);

  /* ─── 5 Buerger-Group-Colors ─── */
  --c-buergermeister: #fbbf24;  /* gold — Ratstaette */
  --c-haendler:       #60a5fa;  /* blue — handel + trust */
  --c-bauer:          #34d399;  /* green — wachstum */
  --c-forscher:       #7dd3fc;  /* sky cyan — wissen */
  --c-kuenstler:      #c084fc;  /* purple — inspiration */
  --c-crisis:         #f87171;  /* red — fuer Krise/Veto */

  /* ─── Borders & Lines ─── */
  --border:          rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.16);
  --border-accent:   rgba(0, 212, 255, 0.30);

  /* ─── Shadows ─── */
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow:     0 0 40px var(--accent-glow);
  --shadow-glow-strong: 0 0 60px var(--accent-glow-strong);
  --shadow-card:     0 0 0 1px var(--border), 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 0 0 1px var(--accent-glow), 0 8px 40px var(--accent-glow);

  /* ─── Typografie ─── */
  --font-sans:       "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-display:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-greek:      "Inter", system-ui, sans-serif;

  /* clamp() typo scale */
  --text-xs:         11px;
  --text-sm:         13px;
  --text-md:         15px;
  --text-lg:         17px;
  --text-xl:         clamp(20px, 2vw, 24px);
  --text-2xl:        clamp(26px, 3vw, 32px);
  --text-3xl:        clamp(34px, 4vw, 44px);
  --text-display:    clamp(48px, 7vw, 84px);
  --text-hero:       clamp(72px, 12vw, 160px);

  --leading-tight:   1.02;
  --leading-snug:    1.32;
  --leading-base:    1.65;
  --leading-loose:   1.85;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-base:    0;
  --tracking-wide:    0.08em;
  --tracking-mark:    0.22em;

  --weight-thin:      300;
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* ─── Spacing ─── */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         24px;
  --space-6:         32px;
  --space-7:         48px;
  --space-8:         64px;
  --space-9:         96px;
  --space-10:        128px;
  --space-11:        192px;

  /* ─── Radii ─── */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       14px;
  --radius-xl:       22px;
  --radius-pill:     999px;

  /* ─── Layout ─── */
  --width-narrow:    640px;
  --width-base:      880px;
  --width-wide:      1200px;
  --width-mega:      1440px;

  /* ─── Motion ─── */
  /* AWWWARDS_EASING — same curve matthiasmeyer.tech + framer-motion variants */
  --ease-awwwards:   cubic-bezier(0.22, 1, 0.36, 1);
  /* StudioMeyer signature easing (brand-bible) */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-instant:     90ms;
  --dur-fast:        180ms;
  --dur-base:        300ms;
  --dur-slow:        600ms;
  --dur-cinematic:   1000ms;

  /* ─── Brand-Markers ─── */
  --brand-mark:      "meetmyagent · polis";
  --brand-tagline:   "Fuenf KI-Buerger bauen eine Stadt.";

  /* ─── Glass / Blur ─── */
  --blur-sm:         blur(8px);
  --blur-md:         blur(16px);
  --blur-lg:         blur(24px);
}

/* Reduced motion respects, CSS-first paint-time (matthiasmeyer.tech pattern) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  :root {
    --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-cinematic: 0ms;
  }
}