/* Generated by tokens/build.mjs from Figma variables (Arena). Do not edit by hand. */
:root {
  /* primitives */
  --neutral-0: #ffffff;
  --neutral-25: #f8fafc;
  --neutral-50: #f1f4f9;
  --neutral-100: #e6ebf2;
  --neutral-200: #d3dae5;
  --neutral-300: #b4bfcf;
  --neutral-400: #8a97ab;
  --neutral-500: #667489;
  --neutral-600: #4b576a;
  --neutral-700: #36404f;
  --neutral-800: #232a35;
  --neutral-850: #1a2029;
  --neutral-900: #12161d;
  --neutral-950: #0b0e13;
  --blue-50: #eef3ff;
  --blue-100: #dce6ff;
  --blue-200: #b9ccff;
  --blue-300: #8eabff;
  --blue-400: #5f84f7;
  --blue-500: #3b63ee;
  --blue-600: #2a4fd6;
  --blue-700: #213fad;
  --blue-800: #1d3687;
  --blue-900: #1a2f6b;
  --blue-950: #131f45;
  --lime-300: #d4f86b;
  --lime-400: #b9ee3a;
  --lime-500: #9bd41c;
  --green-50: #e8f7ee;
  --green-400: #34c46a;
  --green-500: #16a34a;
  --green-600: #12833c;
  --green-900: #0f3d24;
  --amber-50: #fff5e0;
  --amber-400: #f5b331;
  --amber-500: #e59a0b;
  --amber-600: #b87a06;
  --amber-900: #4a3209;
  --red-50: #fdecec;
  --red-400: #f0606c;
  --red-500: #dc3545;
  --red-600: #b42634;
  --red-900: #4d1419;
  /* size */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  /* typography */
  --font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display: 600 32px/40px var(--font-family);
  --type-display-tracking: -0.01em;
  --type-heading-h1: 600 24px/32px var(--font-family);
  --type-heading-h1-tracking: -0.005em;
  --type-heading-h2: 600 20px/28px var(--font-family);
  --type-heading-h2-tracking: -0.003em;
  --type-heading-h3: 600 16px/24px var(--font-family);
  --type-heading-h3-tracking: 0em;
  --type-body-m: 400 14px/20px var(--font-family);
  --type-body-m-tracking: 0em;
  --type-body-m-medium: 500 14px/20px var(--font-family);
  --type-body-m-medium-tracking: 0em;
  --type-body-s: 400 13px/18px var(--font-family);
  --type-body-s-tracking: 0em;
  --type-caption: 400 12px/16px var(--font-family);
  --type-caption-tracking: 0em;
  --type-caption-medium: 500 12px/16px var(--font-family);
  --type-caption-medium-tracking: 0em;
  --type-overline: 600 11px/16px var(--font-family);
  --type-overline-tracking: 0.06em;
  --type-numeric-l: 600 28px/36px var(--font-family);
  --type-numeric-l-tracking: -0.01em;
  --type-numeric-m: 600 20px/28px var(--font-family);
  --type-numeric-m-tracking: -0.005em;
}
:root, [data-theme="light"] {
  color-scheme: light;
  --bg-canvas: var(--neutral-25);
  --bg-surface: var(--neutral-0);
  --bg-surface-2: var(--neutral-50);
  --bg-elevated: var(--neutral-0);
  --bg-inverse: var(--neutral-900);
  --bg-row-hover: var(--neutral-50);
  --bg-row-selected: var(--blue-50);
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-on-accent: var(--neutral-0);
  --text-link: var(--blue-600);
  --accent-default: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-soft: var(--blue-50);
  --accent-on-soft: var(--blue-700);
  --highlight-default: var(--lime-400);
  --status-success: var(--green-600);
  --status-success-soft: var(--green-50);
  --status-warning: var(--amber-600);
  --status-warning-soft: var(--amber-50);
  --status-danger: var(--red-600);
  --status-danger-soft: var(--red-50);
  --focus-ring: var(--blue-300);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: var(--neutral-950);
  --bg-surface: var(--neutral-900);
  --bg-surface-2: var(--neutral-850);
  --bg-elevated: var(--neutral-800);
  --bg-inverse: var(--neutral-50);
  --bg-row-hover: var(--neutral-850);
  --bg-row-selected: var(--blue-950);
  --border-subtle: var(--neutral-800);
  --border-default: var(--neutral-700);
  --border-strong: var(--neutral-600);
  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-400);
  --text-on-accent: var(--neutral-0);
  --text-link: var(--blue-300);
  --accent-default: var(--blue-500);
  --accent-hover: var(--blue-400);
  --accent-soft: var(--blue-900);
  --accent-on-soft: var(--blue-200);
  --highlight-default: var(--lime-400);
  --status-success: var(--green-400);
  --status-success-soft: var(--green-900);
  --status-warning: var(--amber-400);
  --status-warning-soft: var(--amber-900);
  --status-danger: var(--red-400);
  --status-danger-soft: var(--red-900);
  --focus-ring: var(--blue-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-canvas: var(--neutral-950);
    --bg-surface: var(--neutral-900);
    --bg-surface-2: var(--neutral-850);
    --bg-elevated: var(--neutral-800);
    --bg-inverse: var(--neutral-50);
    --bg-row-hover: var(--neutral-850);
    --bg-row-selected: var(--blue-950);
    --border-subtle: var(--neutral-800);
    --border-default: var(--neutral-700);
    --border-strong: var(--neutral-600);
    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --text-tertiary: var(--neutral-400);
    --text-on-accent: var(--neutral-0);
    --text-link: var(--blue-300);
    --accent-default: var(--blue-500);
    --accent-hover: var(--blue-400);
    --accent-soft: var(--blue-900);
    --accent-on-soft: var(--blue-200);
    --highlight-default: var(--lime-400);
    --status-success: var(--green-400);
    --status-success-soft: var(--green-900);
    --status-warning: var(--amber-400);
    --status-warning-soft: var(--amber-900);
    --status-danger: var(--red-400);
    --status-danger-soft: var(--red-900);
    --focus-ring: var(--blue-400);
  }
}