/* ═══════════════════════════════════════════════════════════════════════════
   agenturen.app — DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════
   SINGLE SOURCE OF TRUTH for all visual properties.
   Change values here → entire site updates automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND (Trust Blue, hue=235) ─────────────────────────────────────── */
  --brand-primary: hsl(235, 65%, 48%);
  --brand-primary-hover: hsl(235, 65%, 40%);
  --brand-primary-light: hsl(235, 70%, 95%);
  --brand-primary-muted: hsl(235, 50%, 72%);
  --brand-dark: hsl(235, 55%, 18%);
  --brand-secondary: hsl(260, 65%, 55%);
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));

  /* ─── CTA (Action Orange, hue=25) ─────────────────────────────────────── */
  --cta-color: hsl(25, 95%, 52%);
  --cta-hover: hsl(25, 95%, 45%);
  --cta-glow: hsla(25, 95%, 52%, 0.35);
  --cta-text: #ffffff;
  --cta-gradient: linear-gradient(135deg, hsl(25,95%,55%) 0%, hsl(35,95%,48%) 100%);

  /* ─── TRUST (Success Green) ───────────────────────────────────────────── */
  --trust-color: hsl(152, 68%, 38%);
  --trust-light: hsl(152, 60%, 94%);
  --trust-text: hsl(152, 70%, 22%);

  /* ─── SOCIAL PROOF (Gold Stars) ───────────────────────────────────────── */
  --star-color: hsl(42, 100%, 50%);
  --star-empty: hsl(220, 12%, 82%);
  --review-highlight: hsl(42, 100%, 96%);

  /* ─── URGENCY (Alert Red) ─────────────────────────────────────────────── */
  --urgency-color: hsl(4, 80%, 56%);
  --urgency-light: hsl(4, 80%, 96%);

  /* ─── NEUTRALS (Warm-tinted) ──────────────────────────────────────────── */
  --n-0: #ffffff;
  --n-25: hsl(225, 20%, 98%);
  --n-50: hsl(225, 16%, 96%);
  --n-100: hsl(225, 14%, 92%);
  --n-200: hsl(225, 12%, 85%);
  --n-300: hsl(225, 10%, 72%);
  --n-400: hsl(225, 8%, 56%);
  --n-500: hsl(225, 8%, 42%);
  --n-600: hsl(225, 10%, 30%);
  --n-700: hsl(225, 14%, 22%);
  --n-800: hsl(225, 20%, 14%);
  --n-900: hsl(225, 25%, 8%);

  /* ─── TYPOGRAPHY ──────────────────────────────────────────────────────── */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.25rem;
  --text-5xl: 4rem;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ─── SPACING (4px base) ──────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-1-5: 0.375rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ─── RADII ───────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ─── SHADOWS ─────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.1), 0 4px 8px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 40px -8px rgba(0,0,0,0.12), 0 8px 16px -4px rgba(0,0,0,0.04);
  --shadow-cta: 0 4px 14px var(--cta-glow);
  --shadow-card-hover: 0 16px 32px -4px rgba(0,0,0,0.12), 0 6px 12px -2px rgba(0,0,0,0.06);

  /* ─── TRANSITIONS ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;

  /* ─── LAYOUT ──────────────────────────────────────────────────────────── */
  --max-w: 1200px;
  --max-w-narrow: 720px;
  --max-w-wide: 1400px;

  /* ─── GRADIENTS ───────────────────────────────────────────────────────── */
  --hero-gradient: linear-gradient(135deg, hsl(235,50%,16%) 0%, hsl(235,65%,38%) 40%, hsl(180,70%,36%) 100%);

  /* ─── COMPONENTS ────────────────────────────────────────────────────── */
  --card-border: var(--n-100);

  /* ─── ACCESSIBILITY ────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px hsla(235, 89%, 56%, 0.4);
  --focus-ring-offset: 2px;
}

/* ─── DARK MODE ──────────────────────────────────────────────────────── */
/* TODO: Dark mode disabled — site is designed for light mode only.
   Re-enable and test thoroughly before shipping. */