/* GENERATED by tools/build-tokens.mjs from tokens/tokens.json. Do not edit. */

:root {
  /* light palette (default) */
  --ds-background: #FFFFFF;
  --ds-foreground: #000000;
  --ds-accent: #138AF2;
  --ds-error: #B12424;
  --ds-warning: #C75D07;
  --ds-success: #006B4F;
  --ds-yellow: #F8A300;
  --ds-purple: #6A3DEC;
  --ds-magenta: #9A1B6E;
  --ds-sky: #138AF2;
  --ds-fg-5: color-mix(in srgb, var(--ds-foreground) 5%, transparent);
  --ds-fg-10: color-mix(in srgb, var(--ds-foreground) 10%, transparent);
  --ds-fg-20: color-mix(in srgb, var(--ds-foreground) 20%, transparent);
  --ds-fg-40: color-mix(in srgb, var(--ds-foreground) 40%, transparent);
  --ds-fg-60: color-mix(in srgb, var(--ds-foreground) 60%, transparent);
  --ds-fg-80: color-mix(in srgb, var(--ds-foreground) 80%, transparent);
  --ds-text-secondary: color-mix(in srgb, var(--ds-foreground) 60%, transparent);
  --ds-text-tertiary: color-mix(in srgb, var(--ds-foreground) 40%, transparent);
  --ds-hover: color-mix(in srgb, var(--ds-foreground) 5%, transparent);
  --ds-selected: color-mix(in srgb, var(--ds-foreground) 10%, transparent);
  --ds-field-fill: color-mix(in srgb, var(--ds-foreground) 5%, transparent);
  --ds-field-ring: color-mix(in srgb, var(--ds-foreground) 16%, transparent);
  --ds-card-fill: color-mix(in srgb, var(--ds-foreground) 3.5%, transparent);
  --ds-hairline: color-mix(in srgb, var(--ds-foreground) 7%, transparent);
  --ds-divider: color-mix(in srgb, var(--ds-foreground) 10%, transparent);
  --ds-switch-off: color-mix(in srgb, var(--ds-foreground) 20%, transparent);
  --ds-selection: color-mix(in srgb, var(--ds-foreground) 20%, transparent);
  --ds-button-secondary: color-mix(in srgb, var(--ds-foreground) 15%, transparent);
  --ds-button-secondary-hover: color-mix(in srgb, var(--ds-foreground) 25%, transparent);
  --ds-radius-tile: 6px;
  --ds-radius-menu-row: 8px;
  --ds-radius-nav-item: 10px;
  --ds-radius-control: 12px;
  --ds-radius-card: 16px;
  --ds-radius-panel: 20px;
  --ds-radius-pill: 9999px;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-56: 56px;
  --ds-glass-blur: blur(28px) saturate(1.5);
  --ds-glass-panel-bg: color-mix(in srgb, var(--ds-background) 62%, transparent);
  --ds-page-glow-a: 16%;
  --ds-page-glow-b: 10%;
  --ds-ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ds-ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --ds-switch-thumb-motion: .366s cubic-bezier(.16, -.12, .29, 1.31);
  --ds-switch-track-motion: .216s;
  --ds-font: "Inter Variable", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --ds-font-features: "liga", "calt", "kern", "ss03";
  --ds-font-size: 13px;
  --ds-control-height: 32px;
  --ds-control-height-sm: 24px;
  --ds-icon-tile: 22px;
  --ds-sidebar-width: 224px;
  --ds-shadow-card: 0 1px 1px -1px #0000000d, 0 4px 2px -3px #0000000d, 0 8px 4px -6px #0000000d, 0 12px 40px -12px #0000001a;
  --ds-shadow-panel: 0 1px 1px -1px #0000000d, 0 4px 2px -3px #0000000d, 0 8px 4px -6px #0000000d, 0 12px 40px -12px #0000001a, 0 24px 64px -24px #00000033;
  --ds-tile-blue-top: #5aa9ff;
  --ds-tile-blue-bottom: #2563eb;
  --ds-tile-orange-top: #ffb155;
  --ds-tile-orange-bottom: #f97316;
  --ds-tile-purple-top: #b58bff;
  --ds-tile-purple-bottom: #7c3aed;
  --ds-tile-sky-top: #6fd3ff;
  --ds-tile-sky-bottom: #0ea5e9;
  --ds-tile-green-top: #5ee0a0;
  --ds-tile-green-bottom: #16a34a;
  --ds-tile-yellow-top: #ffd84d;
  --ds-tile-yellow-bottom: #eab308;
  --ds-tile-gray-top: #a3abb8;
  --ds-tile-gray-bottom: #6b7280;
  --ds-tile-pink-top: #ff7ab6;
  --ds-tile-pink-bottom: #db2777;
  --ds-tile-red-top: #ff8a7a;
  --ds-tile-red-bottom: #dc2626;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-background: #0A0E17;
    --ds-foreground: #FFFFFF;
    --ds-accent: #4FA3F8;
    --ds-error: #FF6363;
    --ds-warning: #FF9217;
    --ds-success: #59D499;
    --ds-yellow: #FFC531;
    --ds-purple: #A485FF;
    --ds-magenta: #CF2F98;
    --ds-sky: #56C2FF;
  }
}

:root[data-theme="dark"] {
  --ds-background: #0A0E17;
  --ds-foreground: #FFFFFF;
  --ds-accent: #4FA3F8;
  --ds-error: #FF6363;
  --ds-warning: #FF9217;
  --ds-success: #59D499;
  --ds-yellow: #FFC531;
  --ds-purple: #A485FF;
  --ds-magenta: #CF2F98;
  --ds-sky: #56C2FF;
}

/* Landing page (marketing). Theme-independent: always dark. */
:root {
  --lp-bg: #0b0d12;
  --lp-surface: #12151c;
  --lp-surface2: #181c26;
  --lp-card: #0e1118;
  --lp-line: rgba(255, 255, 255, 0.08);
  --lp-text: #eef1f7;
  --lp-muted: #9aa3b8;
  --lp-body-text: #cdd3e3;
  --lp-accent: #3b82f6;
  --lp-accent-strong: #2f6fe0;
  --lp-violet: #7c5cff;
  --lp-grad-from: #6aa5ff;
  --lp-maxw: 1120px;
  --lp-gutter: 20px;
  --lp-section-pad: 88px;
  --lp-header-h: 64px;
  --lp-radius: 20px;
  --lp-card-radius: 28px;
  --lp-btn-radius: 14px;
  --lp-btn-sm-radius: 10px;
  --lp-h1: clamp(40px, 6.4vw, 72px);
  --lp-h1-hero: clamp(30px, 8.2vw, 88px);
  --lp-h2: clamp(30px, 4vw, 46px);
  --lp-h3: 20px;
  --lp-lead: clamp(17px, 2vw, 20px);
  --lp-body: 16px;
  --lp-small: 14px;
  --lp-line-height: 1.55;
  --lp-heading-line-height: 1.1;
  --lp-heading-tracking: -0.02em;
}