/* Swarm design tokens (generated from design/tokens.json; do not edit by hand).
   Dark only. Semantic names match the board's variables in web/src/index.css. */

:root {
  color-scheme: dark;

  /* color */
  --violet-600: #5f4fd8;
  --violet-500: #6e5ce6;
  --violet-400: #7b5cf0;
  --violet-300: #a298ff;
  --violet-100: #d8d0f7;
  --brand-from: #5b7cfa;
  --brand-mid: #7b5cf0;
  --brand-to: #9b4fe0;
  --night-900: #14102e;
  --night-800: #1d1646;
  --night-700: #2a1660;
  --night-shadow: #180b4a;
  --neutral-950: #0b0b0e;
  --neutral-900: #121217;
  --neutral-850: #17171d;
  --neutral-800: #1c1c23;
  --neutral-750: #26262f;
  --neutral-700: #2f2f3a;
  --neutral-500: #8a8a99;
  --neutral-300: #b4b4c2;
  --neutral-50: #ededf2;
  --white: #ffffff;
  --green-500: #3fb97a;
  --amber-500: #e5a13a;
  --blue-500: #4c9aff;
  --red-500: #f0616d;
  --site-primary-glow: rgb(110 92 230 / 0.6);
  --site-highlight: rgb(255 255 255 / 0.18);
  --site-ico-bg: rgb(110 92 230 / 0.14);
  --site-ico-ring: rgb(162 152 255 / 0.18);
  --site-nav-bg: rgb(11 11 14 / 0.72);
  --site-nav-border: rgb(38 38 47 / 0.7);
  --site-dot: rgb(162 152 255 / 0.16);
  --background: var(--neutral-950);
  --foreground: var(--neutral-50);
  --foreground-soft: var(--neutral-300);
  --card: var(--neutral-900);
  --card-foreground: var(--neutral-50);
  --popover: var(--neutral-850);
  --popover-foreground: var(--neutral-50);
  --primary: var(--violet-500);
  --primary-hover: var(--violet-400);
  --primary-active: var(--violet-600);
  --primary-foreground: var(--white);
  --secondary: var(--neutral-800);
  --secondary-foreground: var(--neutral-50);
  --muted: var(--neutral-800);
  --muted-foreground: var(--neutral-500);
  --accent: var(--neutral-800);
  --accent-foreground: var(--neutral-50);
  --destructive: var(--red-500);
  --border: var(--neutral-750);
  --input: var(--neutral-700);
  --ring: var(--violet-300);
  --link: var(--violet-300);
  --success: var(--green-500);
  --warning: var(--amber-500);
  --info: var(--blue-500);

  /* font */
  --font-sans: "Onest Variable",
    "Onest",
    ui-sans-serif,
    system-ui,
    sans-serif;
  --font-mono: "Fragment Mono",
    ui-monospace,
    "SF Mono",
    monospace;

  /* text */
  --text-display: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  --text-title: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --text-wordmark: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
  --text-heading: 1.25rem;
  --text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --text-code: 0.875rem;
  --text-ui: 0.8125rem;
  --text-key: 0.75rem;

  /* leading */
  --leading-display: 1.08;
  --leading-title: 1.15;
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --leading-code: 1.7;

  /* weight */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 650;

  /* tracking */
  --tracking-display: -0.03em;
  --tracking-title: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-eyebrow: 0.08em;

  /* space */
  --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-28: 7rem;

  /* layout */
  --container: 72rem;
  --gutter: 1rem;
  --section-y: clamp(4rem, 2.6rem + 5.6vw, 7rem);

  /* radius */
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 999px;
  --radius-icon: 22.36%;

  /* shadow */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --shadow-frame: 0 0 0 1px var(--border),
    0 40px 120px -24px rgb(110 92 230 / 0.35),
    0 24px 48px -24px rgb(0 0 0 / 0.7);
  --shadow-icon: drop-shadow(0 28px 40px rgb(10 4 40 / 0.55));
  --focus-ring: 0 0 0 2px var(--background),
    0 0 0 4px var(--ring);

  /* gradient */
  --gradient-brand: linear-gradient(135deg, #5b7cfa 0%, #7b5cf0 55%, #9b4fe0 100%);
  --gradient-night: linear-gradient(135deg, #14102e 0%, #1d1646 55%, #2a1660 100%);
  --glow-brand: radial-gradient(closest-side, rgb(123 92 240 / 0.45), transparent);
  --gradient-hero: radial-gradient(60% 55% at 50% 0%, rgb(110 92 230 / 0.24), transparent 70%),
    radial-gradient(35% 35% at 82% 8%, rgb(155 79 224 / 0.12), transparent 70%),
    radial-gradient(35% 35% at 18% 12%, rgb(91 124 250 / 0.1), transparent 70%);

  /* motion */
  --duration-fast: 120ms;
  --duration: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}