/* ============================================================
   AT Germany — Design Tokens
   Single source of truth — gespiegelt aus /design-tokens.json
   Brand-Türkis #00ACAB (Logo-Pixel-Sampled 406/406)
   ============================================================ */

:root {
  color-scheme: dark;

  /* ── COLOR · Brand (Logo-exact) ─────────────────────────── */
  --brand-50:  #E6FAF9;
  --brand-100: #B8F1EF;
  --brand-200: #7CE5E1;
  --brand-300: #3DD6D1;
  --brand-400: #00C8B3;
  --brand-500: #00ACAB;  /* Logo-Exakt — Primary */
  --brand-600: #008C8B;
  --brand-700: #006B6A;
  --brand-800: #004B4A;
  --brand-900: #002B2B;

  /* ── COLOR · Surface (Dark-Skala) ───────────────────────── */
  --surface-0:   #050B17;
  --surface-100: #0F1D32;
  --surface-200: #162A4A;
  --surface-300: #1E3658;
  --surface-400: #284568;
  --surface-overlay: rgba(15, 29, 50, 0.85);
  --surface-glass:   rgba(255, 255, 255, 0.06);
  --surface-glass-strong: rgba(255, 255, 255, 0.10);
  --surface-glass-border: rgba(0, 172, 171, 0.22);

  /* ── COLOR · Text ───────────────────────────────────────── */
  --text-primary:   #F1F5F9;
  --text-body:      #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --text-inverse:   #0F1D32;
  --text-on-brand:  #FFFFFF;

  /* ── COLOR · Semantic ───────────────────────────────────── */
  --semantic-success: #10B981;
  --semantic-warning: #F59E0B;
  --semantic-danger:  #EF4444;
  --semantic-info:    #3B82F6;

  /* ── COLOR · Border ─────────────────────────────────────── */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.24);
  --border-brand:   rgba(0, 172, 171, 0.40);

  /* ── COLOR · Gradients ──────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, #00C8B3 0%, #00ACAB 50%, #006B6A 100%);
  --gradient-hero-mesh: radial-gradient(at 18% 22%, rgba(0, 200, 179, 0.16) 0%, transparent 42%),
                        radial-gradient(at 82% 18%, rgba(0, 172, 171, 0.12) 0%, transparent 48%),
                        radial-gradient(at 28% 88%, rgba(0, 140, 139, 0.10) 0%, transparent 50%),
                        radial-gradient(at 78% 92%, rgba(0, 200, 179, 0.08) 0%, transparent 42%);
  --gradient-text-brand: linear-gradient(135deg, #00C8B3 0%, #00ACAB 60%, #B8F1EF 100%);
  --gradient-cta: linear-gradient(135deg, #00ACAB 0%, #008C8B 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(0, 200, 179, 0.08) 0%, rgba(0, 172, 171, 0.02) 100%);

  /* ── TYPOGRAPHY · Families ──────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Geist', 'Inter', sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── TYPOGRAPHY · Weights ───────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ── TYPOGRAPHY · Fluid Sizes (clamp) ───────────────────── */
  --fs-xs:   clamp(0.75rem,  0.71rem + 0.18vw, 0.875rem);
  --fs-sm:   clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --fs-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.06rem + 0.33vw, 1.25rem);
  --fs-xl:   clamp(1.25rem,  1.16rem + 0.45vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem,   1.35rem + 0.72vw, 1.875rem);
  --fs-3xl:  clamp(1.875rem, 1.65rem + 1.08vw, 2.5rem);
  --fs-4xl:  clamp(2.25rem,  1.90rem + 1.72vw, 3.25rem);
  --fs-5xl:  clamp(2.75rem,  2.2rem  + 2.6vw,  4.25rem);
  --fs-6xl:  clamp(3.25rem,  2.5rem  + 3.6vw,  5.5rem);
  --fs-display: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* ── TYPOGRAPHY · Line-Heights ──────────────────────────── */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.85;

  /* ── TYPOGRAPHY · Letter Spacing ────────────────────────── */
  --ls-tighter: -0.04em;
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.14em;

  /* ── SPACING · 8pt Grid ─────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ── RADIUS ─────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.75rem;
  --radius-3xl:  2.25rem;
  --radius-full: 9999px;

  /* ── SHADOWS (Dark-optimiert) ───────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.32),
               inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.40),
               inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-xl: 0 24px 56px -8px rgba(0, 0, 0, 0.50),
               inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-glow-brand: 0 0 32px rgba(0, 172, 171, 0.35),
                       0 0 64px rgba(0, 172, 171, 0.18);
  --shadow-glow-soft:  0 8px 32px rgba(0, 172, 171, 0.12);
  --shadow-inset-brand: inset 0 0 0 1px rgba(0, 172, 171, 0.30);

  /* ── BLUR ───────────────────────────────────────────────── */
  --blur-sm: 8px;
  --blur-md: 14px;
  --blur-lg: 24px;
  --blur-xl: 40px;

  /* ── MOTION · Duration ──────────────────────────────────── */
  --d-instant: 100ms;
  --d-fast:    180ms;
  --d-base:    280ms;
  --d-slow:    420ms;
  --d-slower:  640ms;
  --d-slowest: 900ms;

  /* ── MOTION · Easing ────────────────────────────────────── */
  --e-linear:    cubic-bezier(0, 0, 1, 1);
  --e-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --e-in:        cubic-bezier(0.4, 0, 1, 1);
  --e-out:       cubic-bezier(0, 0, 0.2, 1);
  --e-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --e-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-expo-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-narrow: 880px;
  --container-wide:   1440px;
  --container-pad-mobile:  1.25rem;
  --container-pad-tablet:  2rem;
  --container-pad-desktop: 3rem;
  --header-h-mobile:  64px;
  --header-h-desktop: 76px;

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 20;
  --z-sticky:   40;
  --z-fixed:    50;
  --z-header:   100;
  --z-modal:    200;
  --z-toast:    300;
  --z-cursor:   9999;

  /* ── COMPONENT ALIAS-TOKENS ─────────────────────────────── */
  --bg:           var(--surface-100);
  --bg-elevated:  var(--surface-200);
  --bg-glass:     var(--surface-glass);
  --fg:           var(--text-body);
  --fg-strong:    var(--text-primary);
  --fg-muted:     var(--text-secondary);
  --accent:       var(--brand-500);
  --accent-hover: var(--brand-400);
}

/* ── CSS-Layers für saubere Spezifität ────────────────────── */
@layer reset, tokens, base, components, utilities, overrides;

/* ── Light-Mode-Fallback (auto, falls User-System hell) ───── */
@media (prefers-color-scheme: light) {
  /* Wir bleiben bewusst dark-first für Marken-Wiedererkennung.
     Light-Mode = optional future scope. Falls aktiviert: hier umtoken. */
}

/* ── High-Contrast-Modus ──────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --border-subtle:  rgba(255, 255, 255, 0.18);
    --border-default: rgba(255, 255, 255, 0.30);
    --border-strong:  rgba(255, 255, 255, 0.50);
    --text-secondary: #B6C2D2;
    --text-muted:     #94A3B8;
  }
}