/* ds2 design tokens — sourced from surf-client apps/web/src/styles/ds2-tokens.generated.css
 * (originally scoped to [data-ds2]; unscoped to :root here for the standalone landing).
 * Dark-only: the landing is a dark surface; light-theme overrides intentionally dropped. */
:root {
  --c-black: #000000;
  --c-gray-950: #0d0d0d;
  --c-gray-900: #191919;
  --c-gray-850: #232323;
  --c-gray-800: #2d2d2d;
  --c-gray-700: #3d3d3d;
  --c-gray-650: #444444;
  --c-gray-500: #747474;
  --c-gray-450: #8e8e8e;
  --c-gray-400: #a9a9a9;
  --c-gray-300: #c5c5c5;
  --c-gray-200: #e1e1e1;
  --c-white: #ffffff;
  --c-ink: #0e0e0e;
  --point-sky: #2ec6f6;
  --point-pink: #f4cde9;
  --point-mint: #83e3c4;
  --point-lemon: #f4e26d;
  --point-lavender: #c5b3f6;
  --point-coral: #ffa99b;
  --c-purple-700: #9a3df0;
  --c-purple-500: #cc7cff;
  --c-purple-300: #ceb5ff;
  --c-purple-100: #ebdef8;
  --c-pink-300: #f7ccf8;
  --c-magenta: #f53dff;
  --c-flame: #ff3535;
  --c-green: #74f89a;
  --c-red: #ff5555;
  --c-orange: #fd7530;
  --c-blue: #0a84ff;
  --c-sky: #3ccbff;
  --c-yellow: #d5fb65;
  --grad-brand: conic-gradient(from 180deg at 50% 50%, var(--c-flame) 78deg, var(--c-magenta) 360deg);
  --surface-base: var(--c-gray-950);
  --surface-raised: var(--c-gray-900);
  --surface-field: var(--c-gray-800);
  --surface-hover: var(--c-gray-700);
  --surface-control: var(--c-gray-650);
  --surface-blur: rgba(255, 255, 255, 0.4);
  --surface-scrim: rgba(0, 0, 0, 0.6);
  --text-primary: var(--c-white);
  --text-secondary: var(--c-gray-200);
  --text-tertiary: var(--c-gray-400);
  --text-muted: var(--c-gray-450);
  --text-disabled: var(--c-gray-500);
  --text-onAccent: var(--c-white);
  --text-link: var(--c-purple-500);
  --accent: var(--c-purple-500);
  --accent-strong: var(--c-purple-700);
  --accent-soft: var(--c-purple-300);
  --accent-gradient: linear-gradient(90deg, var(--c-purple-500) 0%, var(--c-magenta) 100%);
  --accent-tint: rgba(204, 124, 255, 0.14);
  --status-success: var(--c-green);
  --status-error: var(--c-red);
  --status-warning: var(--c-orange);
  --status-info: var(--c-blue);
  --like: var(--c-red);
  --border-faint: rgba(255, 255, 255, 0.05);
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-error: var(--c-red);
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --ring-faint: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --ring-subtle: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  --ring-strong: inset 0 0 0 1px rgba(255, 255, 255, 0.20);
  --ring-accent: inset 0 0 0 1px var(--c-purple-500);
  --ring-error: inset 0 0 0 1px var(--c-red);
  --glow-accent: 0 6px 20px rgba(204, 124, 255, 0.35);
  --blur-glass: blur(10px);
  --blur-strong: blur(20px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --transition-base: all var(--dur-base) var(--ease-out);
  --font-sans: "Satoshi", "Satoshi Variable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --fs-10: 10px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --type-display: var(--fw-black) var(--fs-32)/var(--lh-tight) var(--font-sans);
  --type-hero: var(--fw-black) var(--fs-40)/var(--lh-tight) var(--font-sans);
  --type-h1: var(--fw-black) var(--fs-28)/var(--lh-snug) var(--font-sans);
  --type-h2: var(--fw-black) var(--fs-24)/var(--lh-snug) var(--font-sans);
  --type-h3: var(--fw-bold) var(--fs-20)/var(--lh-snug) var(--font-sans);
  --type-title: var(--fw-bold) var(--fs-18)/var(--lh-snug) var(--font-sans);
  --type-button: var(--fw-bold) var(--fs-16)/var(--lh-tight) var(--font-sans);
  --type-body: var(--fw-medium) var(--fs-14)/var(--lh-body) var(--font-sans);
  --type-body-strong: var(--fw-bold) var(--fs-14)/var(--lh-body) var(--font-sans);
  --type-label: var(--fw-bold) var(--fs-14)/var(--lh-tight) var(--font-sans);
  --type-caption: var(--fw-medium) var(--fs-12)/var(--lh-tight) var(--font-sans);
  --type-tag: var(--fw-bold) var(--fs-12)/var(--lh-tight) var(--font-sans);
  --type-micro: var(--fw-medium) var(--fs-10)/var(--lh-tight) var(--font-sans);
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;
  --control-h-xs: 28px;
  --control-h-sm: 36px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --control-h-xl: 56px;
  --container-mobile: 375px;
  --container-web: 1280px;
  --gutter-mobile: 16px;
  --gutter-web: 24px;
  --tabbar-h: 64px;
  --topbar-h: 56px;
}