/* =====================================================================
   VIBELINK DESIGN SYSTEM — Design Tokens
   ---------------------------------------------------------------------
   Angepasst für tobiasganster.de: Cyan/Orange Farbschema
   Dark-mode-first.
   ===================================================================== */

/* ---- Local Fonts (DSGVO-konform, kein Google CDN) ---- */
@font-face {
  font-family: 'Orbitron';
  src: url('../assets/fonts/Orbitron-Variable.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------
     1. COLOR PRIMITIVES
     ------------------------------------------------------------------ */

  /* Brand — Electric Cyan */
  --vl-cyan-50:  #ecfeff;
  --vl-cyan-100: #cffafe;
  --vl-cyan-200: #a5f3fc;
  --vl-cyan-300: #67e8f9;
  --vl-cyan-400: #22d3ee;
  --vl-cyan-500: #06b6d4;
  --vl-cyan-600: #0891b2;
  --vl-cyan-700: #0e7490;

  /* Accent — Vibrant Orange */
  --vl-orange-50:  #fff7ed;
  --vl-orange-100: #ffedd5;
  --vl-orange-200: #fed7aa;
  --vl-orange-300: #fdba74;
  --vl-orange-400: #fb923c;
  --vl-orange-500: #f97316;
  --vl-orange-600: #ea580c;
  --vl-orange-700: #c2410c;

  /* Neutrals — Cool Slate */
  --vl-neutral-0:   #ffffff;
  --vl-neutral-50:  #f8fafc;
  --vl-neutral-100: #f1f5f9;
  --vl-neutral-200: #e2e8f0;
  --vl-neutral-300: #cbd5e1;
  --vl-neutral-400: #94a3b8;
  --vl-neutral-500: #64748b;
  --vl-neutral-600: #475569;
  --vl-neutral-700: #334155;
  --vl-neutral-800: #1e293b;
  --vl-neutral-900: #0f172a;
  --vl-neutral-950: #0a0a0f;

  /* Semantic primitives */
  --vl-green-400:  #4ade80;
  --vl-green-500:  #22c55e;
  --vl-green-600:  #16a34a;
  --vl-amber-400:  #fbbf24;
  --vl-amber-500:  #f59e0b;
  --vl-amber-600:  #d97706;
  --vl-red-400:    #f87171;
  --vl-red-500:    #ef4444;
  --vl-red-600:    #dc2626;
  --vl-blue-400:   #60a5fa;
  --vl-blue-500:   #3b82f6;
  --vl-blue-600:   #2563eb;

  /* ------------------------------------------------------------------
     2. SEMANTIC COLOR TOKENS (DARK theme)
     ------------------------------------------------------------------ */

  /* Surfaces */
  --vl-bg-base:        var(--vl-neutral-950);
  --vl-bg-surface:     var(--vl-neutral-900);
  --vl-bg-surface-2:   var(--vl-neutral-800);
  --vl-bg-elevated:    #161622;
  --vl-bg-overlay:     rgba(10, 10, 15, 0.72);
  --vl-bg-inset:       #06060a;

  /* Brand — Cyan */
  --vl-brand:            var(--vl-cyan-500);
  --vl-brand-hover:      var(--vl-cyan-400);
  --vl-brand-active:     var(--vl-cyan-600);
  --vl-brand-subtle:     rgba(6, 182, 212, 0.14);
  --vl-brand-border:     rgba(6, 182, 212, 0.40);
  --vl-on-brand:         #ffffff;

  /* Accent — Orange */
  --vl-accent:           var(--vl-orange-500);
  --vl-accent-hover:     var(--vl-orange-400);
  --vl-accent-subtle:    rgba(249, 115, 22, 0.14);
  --vl-on-accent:        #ffffff;

  /* Text */
  --vl-text-primary:     var(--vl-neutral-50);
  --vl-text-secondary:   var(--vl-neutral-300);
  --vl-text-tertiary:    var(--vl-neutral-400);
  --vl-text-disabled:    var(--vl-neutral-600);
  --vl-text-link:        var(--vl-cyan-300);
  --vl-text-inverse:     var(--vl-neutral-950);

  /* Borders */
  --vl-border-subtle:    rgba(255, 255, 255, 0.07);
  --vl-border-default:   rgba(255, 255, 255, 0.12);
  --vl-border-strong:    rgba(255, 255, 255, 0.22);
  --vl-border-focus:     var(--vl-cyan-400);

  /* Semantic states */
  --vl-success:          var(--vl-green-500);
  --vl-success-subtle:   rgba(34, 197, 94, 0.14);
  --vl-warning:          var(--vl-amber-500);
  --vl-warning-subtle:   rgba(245, 158, 11, 0.14);
  --vl-danger:           var(--vl-red-500);
  --vl-danger-subtle:    rgba(239, 68, 68, 0.14);
  --vl-info:             var(--vl-blue-500);
  --vl-info-subtle:      rgba(59, 130, 246, 0.14);

  /* ------------------------------------------------------------------
     3. TYPOGRAPHY
     ------------------------------------------------------------------ */
  --vl-font-display: "Orbitron", "Inter", sans-serif;
  --vl-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --vl-font-pixel: "Press Start 2P", monospace;
  --vl-font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas,
                  monospace;

  /* Type scale (1.250 — major third) */
  --vl-text-xs:   0.75rem;
  --vl-text-sm:   0.875rem;
  --vl-text-md:   1rem;
  --vl-text-lg:   1.125rem;
  --vl-text-xl:   1.5rem;
  --vl-text-2xl:  1.875rem;
  --vl-text-3xl:  2.5rem;
  --vl-text-4xl:  3.5rem;
  --vl-text-5xl:  4.5rem;

  /* Font weights */
  --vl-weight-regular:  400;
  --vl-weight-medium:   500;
  --vl-weight-semibold: 600;
  --vl-weight-bold:     700;
  --vl-weight-black:    900;

  /* Line heights */
  --vl-leading-tight:   1.2;
  --vl-leading-snug:    1.4;
  --vl-leading-normal:  1.6;

  /* Letter spacing */
  --vl-tracking-tight:  -0.02em;
  --vl-tracking-normal: 0;
  --vl-tracking-wide:   0.04em;
  --vl-tracking-wider:  0.08em;

  /* ------------------------------------------------------------------
     4. SPACING (4px base scale)
     ------------------------------------------------------------------ */
  --vl-space-0:   0;
  --vl-space-1:   0.25rem;
  --vl-space-2:   0.5rem;
  --vl-space-3:   0.75rem;
  --vl-space-4:   1rem;
  --vl-space-5:   1.5rem;
  --vl-space-6:   2rem;
  --vl-space-7:   3rem;
  --vl-space-8:   4rem;
  --vl-space-9:   6rem;
  --vl-space-10:  8rem;

  /* ------------------------------------------------------------------
     5. RADII
     ------------------------------------------------------------------ */
  --vl-radius-sm:   6px;
  --vl-radius-md:   10px;
  --vl-radius-lg:   16px;
  --vl-radius-xl:   24px;
  --vl-radius-pill: 999px;
  --vl-radius-circle: 50%;

  /* ------------------------------------------------------------------
     6. SHADOWS / ELEVATION
     ------------------------------------------------------------------ */
  --vl-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --vl-shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.45);
  --vl-shadow-md:  0 6px 18px rgba(0, 0, 0, 0.5);
  --vl-shadow-lg:  0 14px 38px rgba(0, 0, 0, 0.55);
  --vl-shadow-glow: 0 0 24px rgba(6, 182, 212, 0.45);
  --vl-shadow-glow-accent: 0 0 24px rgba(249, 115, 22, 0.40);

  /* ------------------------------------------------------------------
     7. MOTION
     ------------------------------------------------------------------ */
  --vl-duration-fast:   120ms;
  --vl-duration-base:   200ms;
  --vl-duration-slow:   320ms;
  --vl-duration-reveal:  600ms;
  --vl-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --vl-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --vl-ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------------------------------------------
     8. LAYOUT
     ------------------------------------------------------------------ */
  --vl-z-base:      0;
  --vl-z-dropdown:  1000;
  --vl-z-sticky:    1100;
  --vl-z-overlay:   1200;
  --vl-z-modal:     1300;
  --vl-z-toast:     1400;
  --vl-z-tooltip:   1500;

  --vl-container-sm:  640px;
  --vl-container-md:  840px;
  --vl-container-lg:  1080px;
  --vl-container-xl:  1280px;

  /* Gradients — Cyan → Orange */
  --vl-gradient-brand: linear-gradient(135deg, var(--vl-cyan-500) 0%, var(--vl-orange-500) 100%);
  --vl-gradient-accent: linear-gradient(135deg, var(--vl-cyan-400) 0%, var(--vl-orange-400) 100%);
  --vl-gradient-hero: radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
                      radial-gradient(ellipse at 80% 50%, rgba(249, 115, 22, 0.10) 0%, transparent 50%);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vl-duration-fast: 0ms;
    --vl-duration-base: 0ms;
    --vl-duration-slow: 0ms;
    --vl-duration-reveal: 0ms;
  }
}