/* ============================================
   FlowPilot — Design Tokens
   All color, typography, spacing, and motion
   variables live here.
   ============================================ */

:root {
  /* ─── Surfaces ─── */
  --bg-0: #0A0A0F;        /* page background */
  --bg-1: #111118;        /* card / elevated surface */
  --bg-2: #1A1A24;        /* hover / deeper elevation */

  /* ─── Borders ─── */
  --border: rgba(255, 255, 255, 0.08);
  --border-lit: rgba(124, 58, 237, 0.3);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* ─── Text ─── */
  --text-0: #F5F5F7;      /* primary */
  --text-1: #B8B8C7;      /* secondary / body */
  --text-2: #8B8B9B;      /* tertiary / captions (WCAG AA AA pass: 5.89:1 on bg-0) */

  /* ─── Brand (violet) ─── */
  --brand-300: #A78BFA;
  --brand-400: #8B5CF6;
  --brand-500: #7840E8;   /* PRIMARY · synced with logo gradient start */
  --brand-600: #6D28D9;   /* hover */
  --brand-700: #5B21B6;   /* pressed */
  --brand-glow: rgba(120, 64, 232, 0.4);
  --brand-glow-soft: rgba(120, 64, 232, 0.15);

  /* ─── Accents ─── */
  --accent-cyan: #22D3EE;
  --accent-pink: #EC4899;

  /* ─── Gradients ─── */
  --gradient-hero: linear-gradient(135deg, #7840E8 0%, #E050A8 100%);
  --gradient-border: linear-gradient(135deg, #7C3AED 0%, #22D3EE 100%);

  /* ─── Typography ─── */
  --font-display: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* ─── Spacing scale (px) ─── */
  --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: 120px;
  --space-11: 160px;

  /* ─── Layout ─── */
  --container-max: 1200px;
  --container-padding: 24px;
  --nav-height: 72px;
  --nav-height-mobile: 64px;

  /* ─── Radii ─── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 64px;
  }
}