/* Design tokens. Single source of truth for palette, type scale, spacing and motion. */
:root {
  /* Palette */
  --color-white: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #fafafc;
  --color-surface-tint: #f7f5ff;
  --color-border: #ececf3;
  --color-border-strong: #e2e2ec;

  --color-text: #14141f;
  --color-text-soft: #4b4b5b;
  --color-text-muted: #7c7c8c;

  --color-accent: #7c3aed;
  --color-accent-strong: #6d28d9;
  --color-accent-deep: #4c1d95;
  --color-accent-light: #a78bfa;
  --color-accent-soft: #f4f0ff;

  --color-success: #047857;
  --color-success-soft: #ecfdf5;
  --color-danger: #b91c1c;
  --color-danger-soft: #fef2f2;

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, var(--color-accent-strong) 0%, var(--color-accent) 100%);
  --gradient-panel: linear-gradient(120deg, #3b1183 0%, #5b21b6 42%, #7c3aed 100%);
  --gradient-send: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 55%, #a855f7 100%);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-title: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);
  --text-hero: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-section: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);

  --shell-max: 1180px;
  --shell-gutter: clamp(1.125rem, 0.75rem + 1.6vw, 2rem);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgb(20 20 31 / 0.05);
  --shadow-sm: 0 4px 16px rgb(20 20 31 / 0.06);
  --shadow-md: 0 12px 32px -12px rgb(20 20 31 / 0.16);
  --shadow-accent: 0 12px 28px -12px rgb(124 58 237 / 0.55);
  --shadow-panel: 0 30px 60px -30px rgb(76 29 149 / 0.55);

  /* Motion */
  --duration-fast: 140ms;
  --duration-normal: 260ms;
  --duration-slow: 6s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --header-height: 76px;
}
