/**
 * GENERATED FILE — do not edit directly.
 * Authoritative source: src/lib/design-tokens.json
 * Regenerate: node marketing/scripts/build.mjs
 */
:root {
  --krox-color-accent: #818CF8;
  --krox-color-active-background: #2A2A6E;
  --krox-color-border: #2D333B;
  --krox-color-border-strong: #384252;
  --krox-color-border-subtle: #21262D;
  --krox-color-brand-mark-1: #22D3EE;
  --krox-color-brand-mark-2: #38BDF8;
  --krox-color-brand-mark-3: #3B82F6;
  --krox-color-brand-mark-4: #6366F1;
  --krox-color-brand-mark-5: #7C3AED;
  --krox-color-brand-mark-6: #A855F7;
  --krox-color-canvas: #0D1117;
  --krox-color-canvas-deep: #07090C;
  --krox-color-canvas-deepest: #040507;
  --krox-color-canvas-raised: #0F1218;
  --krox-color-danger-background: rgba(239, 68, 68, 0.12);
  --krox-color-danger-border: #EF4444;
  --krox-color-danger-fill: #B91C1C;
  --krox-color-danger-fill-hover: #DC2626;
  --krox-color-danger-text: #F87171;
  --krox-color-focus-ring: rgba(129, 140, 248, 0.45);
  --krox-color-input-background: #1A2030;
  --krox-color-input-background-focus: #181E2C;
  --krox-color-neutral-text: #94A3B8;
  --krox-color-overlay: rgba(0, 0, 0, 0.66);
  --krox-color-primary-fill: #4338CA;
  --krox-color-primary-fill-active: #3730A3;
  --krox-color-primary-fill-hover: #4F46E5;
  --krox-color-primary-text: #FFFFFF;
  --krox-color-shadow-color: rgba(0, 0, 0, 0.45);
  --krox-color-sidebar: #0F141A;
  --krox-color-success-background: rgba(63, 185, 80, 0.12);
  --krox-color-success-border: #238636;
  --krox-color-success-text: #3FB950;
  --krox-color-surface: #161B22;
  --krox-color-surface-active: #232A34;
  --krox-color-surface-hover: #1F242C;
  --krox-color-surface-sunken: #171D27;
  --krox-color-text-disabled: #484F58;
  --krox-color-text-primary: #E6EDF3;
  --krox-color-text-secondary: #8B949E;
  --krox-color-text-tertiary: #6E7681;
  --krox-color-track: #242C3A;
  --krox-color-warning-background: rgba(227, 179, 65, 0.12);
  --krox-color-warning-border: #9E6A03;
  --krox-color-warning-text: #E3B341;

  --krox-radius-standard: 8px;
  --krox-radius-pill: 999px;

  --krox-control-height-sm: 32px;
  --krox-control-height-command: 36px;
  --krox-control-height-toolbar: 40px;
  --krox-control-height-touch: 44px;

  --krox-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --krox-font-mono-family: ui-monospace, 'SF Mono', Menlo, monospace;
  --krox-font-size-9: 9px;
  --krox-font-size-10: 10px;
  --krox-font-size-11: 11px;
  --krox-font-size-12: 12px;
  --krox-font-size-13: 13px;
  --krox-font-size-14: 14px;
  --krox-font-size-15: 15px;
  --krox-font-size-16: 16px;
  --krox-font-size-17: 17px;
  --krox-font-size-18: 18px;
  --krox-font-size-19: 19px;
  --krox-font-size-20: 20px;
  --krox-font-size-24: 24px;
  --krox-font-size-26: 26px;
  --krox-font-size-28: 28px;
  --krox-font-size-30: 30px;
  --krox-font-weight-regular: 400;
  --krox-font-weight-medium: 500;
  --krox-font-weight-semibold: 600;
  --krox-font-weight-bold: 700;
  --krox-line-height-tight: 1.2;
  --krox-line-height-base: 1.45;

  /* Authored semantic typography roles shared with the application. */
  --krox-type-page-title-size: 22px;
  --krox-type-page-title-weight: 500;
  --krox-type-page-title-line-height: 1.3;
  --krox-type-page-title-letter-spacing: -0.01em;
  --krox-type-section-heading-size: 16px;
  --krox-type-section-heading-weight: 500;
  --krox-type-section-heading-line-height: 1.4;
  --krox-type-section-heading-letter-spacing: -0.01em;
  --krox-type-card-title-size: 14px;
  --krox-type-card-title-weight: 500;
  --krox-type-card-title-line-height: 1.4;
  --krox-type-card-title-letter-spacing: -0.005em;
  --krox-type-body-size: 14px;
  --krox-type-body-weight: 400;
  --krox-type-body-line-height: 1.5;
  --krox-type-body-letter-spacing: 0;
  --krox-type-control-size: 13px;
  --krox-type-control-weight: 500;
  --krox-type-control-line-height: 1.4;
  --krox-type-control-letter-spacing: 0;
  --krox-type-caption-size: 12px;
  --krox-type-caption-weight: 400;
  --krox-type-caption-line-height: 1.5;
  --krox-type-caption-letter-spacing: 0;
  --krox-type-number-size: 24px;
  --krox-type-number-weight: 500;
  --krox-type-number-line-height: 1.2;
  --krox-type-number-letter-spacing: -0.02em;
  --krox-type-studio-page-title-size: 30px;
  --krox-type-studio-page-title-weight: 500;
  --krox-type-studio-page-title-line-height: 1.2;
  --krox-type-studio-page-title-letter-spacing: -0.02em;
  --krox-type-studio-number-size: 28px;
  --krox-type-studio-number-weight: 500;
  --krox-type-studio-number-line-height: 1;
  --krox-type-studio-number-letter-spacing: -0.02em;
  --krox-type-studio-eyebrow-size: 12px;
  --krox-type-studio-eyebrow-weight: 500;
  --krox-type-studio-eyebrow-line-height: 1.4;
  --krox-type-studio-eyebrow-letter-spacing: 0.08em;
  --krox-type-marketing-hero-size: 56px;
  --krox-type-marketing-hero-weight: 500;
  --krox-type-marketing-hero-line-height: 1.05;
  --krox-type-marketing-hero-letter-spacing: -0.03em;
  --krox-type-marketing-heading-size: 44px;
  --krox-type-marketing-heading-weight: 500;
  --krox-type-marketing-heading-line-height: 1.12;
  --krox-type-marketing-heading-letter-spacing: -0.03em;

  --krox-icon-size: 18px;
  --krox-icon-size-sm: 16px;

  --krox-space-1: 4px;
  --krox-space-2: 8px;
  --krox-space-3: 12px;
  --krox-space-4: 16px;
  --krox-space-5: 20px;
  --krox-space-6: 24px;
  --krox-space-8: 32px;
  --krox-space-xxl: 48px;

  --krox-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --krox-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4);
  --krox-shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.45);
  --krox-shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.45);

  --krox-motion-fast: 120ms;
  --krox-motion-base: 160ms;
  --krox-motion-slow: 240ms;
  --krox-motion-ease: cubic-bezier(0.2, 0, 0, 1);

  --krox-breakpoint-sm: 640px;
  --krox-breakpoint-md: 900px;
  --krox-breakpoint-lg: 1200px;
}