/*
 * CellPay Design System — canonical tokens (v1.0)
 * ─────────────────────────────────────────────────
 * Auto-generated from tokens/tokens.json. Do not hand-edit.
 *
 * Fully-pathed names (--color-brand-500, --semantic-color-text-primary,
 * --component-button-primary-bg). HSL triplets so
 * `hsl(var(--x) / 0.5)` works.
 *
 * Imported by tokens.css alongside tokens.aliases.css (component-tier
 * shadcn flat names) and tokens.legacy.css (deprecated short names).
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --color-brand-50: 222 62% 96%;
  --color-brand-100: 222 65% 90%;
  --color-brand-200: 221 73% 81%;
  --color-brand-300: 221 80% 71%;
  --color-brand-400: 221 83% 61%;
  --color-brand-500: 221 83% 53%;
  --color-brand-600: 221 80% 47%;
  --color-brand-700: 221 78% 40%;
  --color-brand-800: 221 74% 33%;
  --color-brand-900: 221 68% 26%;
  --color-brand-950: 220 60% 17%;
  --color-neutral-0: 0 0% 100%;
  --color-neutral-50: 220 18% 97%;
  --color-neutral-75: 220 20% 94%;
  --color-neutral-100: 218 21% 93%;
  --color-neutral-200: 218 14% 85%;
  --color-neutral-300: 223 9% 71%;
  --color-neutral-400: 240 9% 59%;
  --color-neutral-500: 224 7% 45%;
  --color-neutral-600: 222 8% 32%;
  --color-neutral-700: 222 10% 20%;
  --color-neutral-800: 222 14% 14%;
  --color-neutral-900: 240 28% 14%;
  --color-neutral-950: 240 33% 8%;
  --color-success-50: 157 53% 94%;
  --color-success-100: 160 56% 84%;
  --color-success-300: 160 48% 60%;
  --color-success-500: 160 84% 39%;
  --color-success-600: 160 85% 33%;
  --color-success-700: 160 84% 25%;
  --color-warning-50: 31 80% 92%;
  --color-warning-100: 32 80% 83%;
  --color-warning-300: 29 79% 67%;
  --color-warning-500: 28 80% 52%;
  --color-warning-600: 28 78% 44%;
  --color-warning-700: 28 80% 34%;
  --color-danger-50: 7 77% 93%;
  --color-danger-100: 5 76% 85%;
  --color-danger-300: 5 76% 72%;
  --color-danger-500: 6 78% 57%;
  --color-danger-600: 5 65% 47%;
  --color-danger-700: 5 66% 37%;
  --color-stat-blue: 221 83% 53%;
  --color-stat-green: 160 84% 39%;
  --color-stat-orange: 28 80% 52%;
  --color-stat-red: 6 78% 57%;
  --color-stat-purple: 256 60% 60%;
  --color-stat-teal: 180 69% 39%;
  --color-stat-pink: 325 64% 56%;
  --color-stat-amber: 41 74% 53%;
  --color-constant-white: 0 0% 100%;
  --color-constant-black: 0 0% 0%;
  --semantic-color-surface-canvas: 220 18% 97%;
  --semantic-color-surface-raised: 0 0% 100%;
  --semantic-color-surface-sunken: 220 20% 94%;
  --semantic-color-surface-overlay: 0 0% 100%;
  --semantic-color-surface-inverse: 240 28% 14%;
  --semantic-color-surface-scrim: rgba(15, 18, 28, 0.55);
  --semantic-color-text-primary: 240 28% 14%;
  --semantic-color-text-secondary: 224 7% 45%;
  --semantic-color-text-muted: 224 7% 45%;
  --semantic-color-text-disabled: 223 9% 71%;
  --semantic-color-text-inverse: 0 0% 100%;
  --semantic-color-text-link: 221 83% 53%;
  --semantic-color-text-link-hover: 221 80% 47%;
  --semantic-color-text-on-brand: 0 0% 100%;
  --semantic-color-text-on-success: 0 0% 100%;
  --semantic-color-text-on-warning: 0 0% 100%;
  --semantic-color-text-on-danger: 0 0% 100%;
  --semantic-color-border-subtle: 220 18% 97%;
  --semantic-color-border-default: 218 21% 93%;
  --semantic-color-border-strong: 218 14% 85%;
  --semantic-color-border-focus: 221 83% 53%;
  --semantic-color-action-primary: 221 83% 53%;
  --semantic-color-action-primary-hover: 221 80% 47%;
  --semantic-color-action-primary-active: 221 78% 40%;
  --semantic-color-action-primary-on: 0 0% 100%;
  --semantic-color-action-secondary: 0 0% 100%;
  --semantic-color-action-secondary-hover: 220 18% 97%;
  --semantic-color-action-secondary-active: 220 20% 94%;
  --semantic-color-action-danger: 6 78% 57%;
  --semantic-color-action-danger-hover: 5 65% 47%;
  --semantic-color-action-danger-active: 5 66% 37%;
  --semantic-color-feedback-success-fg: 160 84% 25%;
  --semantic-color-feedback-success-bg: 157 53% 94%;
  --semantic-color-feedback-success-bd: 160 56% 84%;
  --semantic-color-feedback-warning-fg: 28 80% 34%;
  --semantic-color-feedback-warning-bg: 31 80% 92%;
  --semantic-color-feedback-warning-bd: 32 80% 83%;
  --semantic-color-feedback-danger-fg: 5 66% 37%;
  --semantic-color-feedback-danger-bg: 7 77% 93%;
  --semantic-color-feedback-danger-bd: 5 76% 85%;
  --semantic-color-feedback-info-fg: 221 78% 40%;
  --semantic-color-feedback-info-bg: 222 62% 96%;
  --semantic-color-feedback-info-bd: 222 65% 90%;
  --semantic-radius-control: 4px;
  --semantic-radius-interactive: 8px;
  --semantic-radius-container: 12px;
  --semantic-radius-pill: 9999px;
  --semantic-radius-chart: 4px;
  --component-button-primary-bg: 221 83% 53%;
  --component-button-primary-bg-hover: 221 80% 47%;
  --component-button-primary-bg-active: 221 78% 40%;
  --component-button-primary-fg: 0 0% 100%;
  --component-button-secondary-bg: 0 0% 100%;
  --component-button-secondary-bg-hover: 220 18% 97%;
  --component-button-secondary-bg-active: 220 20% 94%;
  --component-button-secondary-fg: 240 28% 14%;
  --component-button-secondary-border: 218 14% 85%;
  --component-button-danger-bg: 6 78% 57%;
  --component-button-danger-bg-hover: 5 65% 47%;
  --component-button-danger-bg-active: 5 66% 37%;
  --component-button-danger-fg: 0 0% 100%;
  --component-button-size-xs-height: 26px;
  --component-button-size-xs-padding-x: 10px;
  --component-button-size-xs-font-size: 12px;
  --component-button-size-sm-height: 32px;
  --component-button-size-sm-padding-x: 14px;
  --component-button-size-sm-font-size: 13px;
  --component-button-size-md-height: 38px;
  --component-button-size-md-padding-x: 18px;
  --component-button-size-md-font-size: 14px;
  --component-button-size-lg-height: 46px;
  --component-button-size-lg-padding-x: 22px;
  --component-button-size-lg-font-size: 15px;
  --component-button-size-xl-height: 54px;
  --component-button-size-xl-padding-x: 28px;
  --component-button-size-xl-font-size: 16px;
  --component-input-bg: 0 0% 100%;
  --component-input-fg: 240 28% 14%;
  --component-input-placeholder: 240 9% 59%;
  --component-input-border: 218 14% 85%;
  --component-input-border-hover: 223 9% 71%;
  --component-input-border-focus: 221 83% 53%;
  --component-input-border-error: 6 78% 57%;
  --component-input-size-sm-height: 32px;
  --component-input-size-sm-padding-x: 10px;
  --component-input-size-sm-font-size: 13px;
  --component-input-size-md-height: 40px;
  --component-input-size-md-padding-x: 12px;
  --component-input-size-md-font-size: 14px;
  --component-input-size-lg-height: 46px;
  --component-input-size-lg-padding-x: 14px;
  --component-input-size-lg-font-size: 15px;
  --component-card-bg: 0 0% 100%;
  --component-card-border: 218 21% 93%;
  --component-card-shadow: 0 1px 2px rgb(15 18 28 / 0.04), 0 1px 1px rgb(15 18 28 / 0.03);
  --component-card-radius: 12px;
  --component-card-padding: 24px;
  --component-badge-success-bg: 157 53% 94%;
  --component-badge-success-fg: 160 84% 25%;
  --component-badge-warning-bg: 31 80% 92%;
  --component-badge-warning-fg: 28 80% 34%;
  --component-badge-danger-bg: 7 77% 93%;
  --component-badge-danger-fg: 5 66% 37%;
  --component-badge-info-bg: 222 62% 96%;
  --component-badge-info-fg: 221 78% 40%;
  --component-badge-brand-bg: 222 62% 96%;
  --component-badge-brand-fg: 221 78% 40%;
  --component-badge-neutral-bg: 218 21% 93%;
  --component-badge-neutral-fg: 222 8% 32%;
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --radius-none: 0px;
  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgb(15 18 28 / 0.04), 0 1px 1px rgb(15 18 28 / 0.03);
  --shadow-2: 0 1px 4px rgb(15 18 28 / 0.06), 0 1px 2px rgb(15 18 28 / 0.04);
  --shadow-3: 0 4px 12px rgb(15 18 28 / 0.08), 0 2px 4px rgb(15 18 28 / 0.04);
  --shadow-4: 0 12px 24px rgb(15 18 28 / 0.10), 0 4px 8px rgb(15 18 28 / 0.05);
  --shadow-5: 0 24px 48px rgb(15 18 28 / 0.14), 0 8px 16px rgb(15 18 28 / 0.06);
  --shadow-focus-ring: 0 0 0 3px #2563EB50;
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --easing-linear: linear;
  --easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-in: cubic-bezier(0.55, 0, 1, 0.45);
  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-button-hover: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-input-focus: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-tooltip-enter: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-tooltip-exit: 150ms cubic-bezier(0.55, 0, 1, 0.45);
  --transition-modal-enter: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-modal-exit: 200ms cubic-bezier(0.55, 0, 1, 0.45);
  --transition-drawer-slide: 300ms cubic-bezier(0.65, 0, 0.35, 1);
  --transition-switch-toggle: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-page-navigate: 200ms cubic-bezier(0.65, 0, 0.35, 1);
  --z-index-base: 0;
  --z-index-raised: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-overlay: 300;
  --z-index-modal: 400;
  --z-index-popover: 500;
  --z-index-tooltip: 600;
  --z-index-toast: 700;
  --z-index-command: 800;
  --breakpoint-xs: 0px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --layout-sidebar-width: 280px;
  --layout-sidebar-collapsed: 64px;
  --layout-content-max-width: 1280px;
  --layout-readable-max-width: 70ch;
  --layout-header-height: 56px;
  --font-family-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-display: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-4xl: 72px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --font-line-height-tight: 1.1;
  --font-line-height-snug: 1.25;
  --font-line-height-normal: 1.5;
  --font-line-height-relaxed: 1.65;
  --font-letter-spacing-tighter: -0.02em;
  --font-letter-spacing-tight: -0.01em;
  --font-letter-spacing-normal: 0;
  --font-letter-spacing-wide: 0.02em;
  --font-letter-spacing-wider: 0.04em;
}

.dark, [data-theme="dark"] {
  --color-brand-50: 222 62% 96%;
  --color-brand-100: 222 65% 90%;
  --color-brand-200: 221 73% 81%;
  --color-brand-300: 221 80% 71%;
  --color-brand-400: 221 83% 61%;
  --color-brand-500: 221 83% 53%;
  --color-brand-600: 221 82% 55%;
  --color-brand-700: 221 78% 40%;
  --color-brand-800: 221 74% 33%;
  --color-brand-900: 221 68% 26%;
  --color-brand-950: 220 60% 17%;
  --color-neutral-0: 229 15% 14%;
  --color-neutral-50: 231 14% 10%;
  --color-neutral-75: 231 15% 18%;
  --color-neutral-100: 228 10% 20%;
  --color-neutral-200: 231 14% 26%;
  --color-neutral-300: 230 10% 36%;
  --color-neutral-400: 229 7% 52%;
  --color-neutral-500: 240 7% 65%;
  --color-neutral-600: 227 13% 80%;
  --color-neutral-700: 228 17% 88%;
  --color-neutral-800: 223 20% 93%;
  --color-neutral-900: 0 0% 98%;
  --color-neutral-950: 0 0% 100%;
  --color-success-50: 157 53% 94%;
  --color-success-100: 160 56% 84%;
  --color-success-300: 160 48% 60%;
  --color-success-500: 160 84% 39%;
  --color-success-600: 160 85% 33%;
  --color-success-700: 160 84% 25%;
  --color-warning-50: 31 80% 92%;
  --color-warning-100: 32 80% 83%;
  --color-warning-300: 29 79% 67%;
  --color-warning-500: 28 80% 52%;
  --color-warning-600: 28 78% 44%;
  --color-warning-700: 28 80% 34%;
  --color-danger-50: 7 77% 93%;
  --color-danger-100: 5 76% 85%;
  --color-danger-300: 5 76% 72%;
  --color-danger-500: 4 76% 57%;
  --color-danger-600: 5 65% 47%;
  --color-danger-700: 5 66% 37%;
  --color-stat-blue: 221 83% 53%;
  --color-stat-green: 160 84% 39%;
  --color-stat-orange: 28 80% 52%;
  --color-stat-red: 4 76% 57%;
  --color-stat-purple: 258 89% 66%;
  --color-stat-teal: 180 69% 39%;
  --color-stat-pink: 325 64% 56%;
  --color-stat-amber: 41 74% 53%;
  --color-constant-white: 0 0% 100%;
  --color-constant-black: 0 0% 0%;
  --semantic-color-surface-canvas: 231 14% 10%;
  --semantic-color-surface-raised: 229 15% 14%;
  --semantic-color-surface-sunken: 231 15% 18%;
  --semantic-color-surface-overlay: 229 15% 14%;
  --semantic-color-surface-inverse: 0 0% 98%;
  --semantic-color-surface-scrim: rgba(15, 18, 28, 0.55);
  --semantic-color-text-primary: 0 0% 98%;
  --semantic-color-text-secondary: 240 7% 65%;
  --semantic-color-text-muted: 240 7% 65%;
  --semantic-color-text-disabled: 230 10% 36%;
  --semantic-color-text-inverse: 229 15% 14%;
  --semantic-color-text-link: 221 80% 71%;
  --semantic-color-text-link-hover: 221 73% 81%;
  --semantic-color-text-on-brand: 0 0% 100%;
  --semantic-color-text-on-success: 0 0% 100%;
  --semantic-color-text-on-warning: 0 0% 100%;
  --semantic-color-text-on-danger: 0 0% 100%;
  --semantic-color-border-subtle: 231 14% 10%;
  --semantic-color-border-default: 228 10% 20%;
  --semantic-color-border-strong: 231 14% 26%;
  --semantic-color-border-focus: 221 83% 53%;
  --semantic-color-action-primary: 221 83% 53%;
  --semantic-color-action-primary-hover: 221 82% 55%;
  --semantic-color-action-primary-active: 221 78% 40%;
  --semantic-color-action-primary-on: 0 0% 100%;
  --semantic-color-action-secondary: 231 15% 18%;
  --semantic-color-action-secondary-hover: 228 10% 20%;
  --semantic-color-action-secondary-active: 231 14% 26%;
  --semantic-color-action-danger: 4 76% 57%;
  --semantic-color-action-danger-hover: 5 65% 47%;
  --semantic-color-action-danger-active: 5 66% 37%;
  --semantic-color-feedback-success-fg: 160 48% 60%;
  --semantic-color-feedback-success-bg: 161 31% 12%;
  --semantic-color-feedback-success-bd: 160 33% 18%;
  --semantic-color-feedback-warning-fg: 29 79% 67%;
  --semantic-color-feedback-warning-bg: 32 45% 11%;
  --semantic-color-feedback-warning-bd: 33 43% 19%;
  --semantic-color-feedback-danger-fg: 5 76% 72%;
  --semantic-color-feedback-danger-bg: 8 35% 12%;
  --semantic-color-feedback-danger-bd: 7 40% 21%;
  --semantic-color-feedback-info-fg: 221 80% 71%;
  --semantic-color-feedback-info-bg: 221 42% 13%;
  --semantic-color-feedback-info-bd: 222 46% 22%;
  --semantic-radius-control: 4px;
  --semantic-radius-interactive: 8px;
  --semantic-radius-container: 12px;
  --semantic-radius-pill: 9999px;
  --semantic-radius-chart: 4px;
  --component-button-primary-bg: 221 83% 53%;
  --component-button-primary-bg-hover: 221 82% 55%;
  --component-button-primary-bg-active: 221 78% 40%;
  --component-button-primary-fg: 0 0% 100%;
  --component-button-secondary-bg: 231 15% 18%;
  --component-button-secondary-bg-hover: 228 10% 20%;
  --component-button-secondary-bg-active: 231 14% 26%;
  --component-button-secondary-fg: 0 0% 98%;
  --component-button-secondary-border: 231 14% 26%;
  --component-button-danger-bg: 4 76% 57%;
  --component-button-danger-bg-hover: 5 65% 47%;
  --component-button-danger-bg-active: 5 66% 37%;
  --component-button-danger-fg: 0 0% 100%;
  --component-button-size-xs-height: 26px;
  --component-button-size-xs-padding-x: 10px;
  --component-button-size-xs-font-size: 12px;
  --component-button-size-sm-height: 32px;
  --component-button-size-sm-padding-x: 14px;
  --component-button-size-sm-font-size: 13px;
  --component-button-size-md-height: 38px;
  --component-button-size-md-padding-x: 18px;
  --component-button-size-md-font-size: 14px;
  --component-button-size-lg-height: 46px;
  --component-button-size-lg-padding-x: 22px;
  --component-button-size-lg-font-size: 15px;
  --component-button-size-xl-height: 54px;
  --component-button-size-xl-padding-x: 28px;
  --component-button-size-xl-font-size: 16px;
  --component-input-bg: 231 15% 18%;
  --component-input-fg: 0 0% 98%;
  --component-input-placeholder: 229 7% 52%;
  --component-input-border: 231 14% 26%;
  --component-input-border-hover: 230 10% 36%;
  --component-input-border-focus: 221 83% 53%;
  --component-input-border-error: 4 76% 57%;
  --component-input-size-sm-height: 32px;
  --component-input-size-sm-padding-x: 10px;
  --component-input-size-sm-font-size: 13px;
  --component-input-size-md-height: 40px;
  --component-input-size-md-padding-x: 12px;
  --component-input-size-md-font-size: 14px;
  --component-input-size-lg-height: 46px;
  --component-input-size-lg-padding-x: 14px;
  --component-input-size-lg-font-size: 15px;
  --component-card-bg: 229 15% 14%;
  --component-card-border: 228 10% 20%;
  --component-card-shadow: 0 1px 2px rgb(0 0 0 / 0.30);
  --component-card-radius: 12px;
  --component-card-padding: 24px;
  --component-badge-success-bg: 161 31% 12%;
  --component-badge-success-fg: 160 48% 60%;
  --component-badge-warning-bg: 32 45% 11%;
  --component-badge-warning-fg: 29 79% 67%;
  --component-badge-danger-bg: 8 35% 12%;
  --component-badge-danger-fg: 5 76% 72%;
  --component-badge-info-bg: 221 42% 13%;
  --component-badge-info-fg: 221 80% 71%;
  --component-badge-brand-bg: 221 42% 13%;
  --component-badge-brand-fg: 221 80% 71%;
  --component-badge-neutral-bg: 228 10% 20%;
  --component-badge-neutral-fg: 227 13% 80%;
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --radius-none: 0px;
  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-2: 0 1px 4px rgb(0 0 0 / 0.35);
  --shadow-3: 0 4px 12px rgb(0 0 0 / 0.40);
  --shadow-4: 0 12px 24px rgb(0 0 0 / 0.50);
  --shadow-5: 0 24px 48px rgb(0 0 0 / 0.55);
  --shadow-focus-ring: 0 0 0 3px #2563EB50;
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --easing-linear: linear;
  --easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-in: cubic-bezier(0.55, 0, 1, 0.45);
  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-button-hover: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-input-focus: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-tooltip-enter: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-tooltip-exit: 150ms cubic-bezier(0.55, 0, 1, 0.45);
  --transition-modal-enter: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-modal-exit: 200ms cubic-bezier(0.55, 0, 1, 0.45);
  --transition-drawer-slide: 300ms cubic-bezier(0.65, 0, 0.35, 1);
  --transition-switch-toggle: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-page-navigate: 200ms cubic-bezier(0.65, 0, 0.35, 1);
  --z-index-base: 0;
  --z-index-raised: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-overlay: 300;
  --z-index-modal: 400;
  --z-index-popover: 500;
  --z-index-tooltip: 600;
  --z-index-toast: 700;
  --z-index-command: 800;
  --breakpoint-xs: 0px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --layout-sidebar-width: 280px;
  --layout-sidebar-collapsed: 64px;
  --layout-content-max-width: 1280px;
  --layout-readable-max-width: 70ch;
  --layout-header-height: 56px;
  --font-family-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-display: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-4xl: 72px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --font-line-height-tight: 1.1;
  --font-line-height-snug: 1.25;
  --font-line-height-normal: 1.5;
  --font-line-height-relaxed: 1.65;
  --font-letter-spacing-tighter: -0.02em;
  --font-letter-spacing-tight: -0.01em;
  --font-letter-spacing-normal: 0;
  --font-letter-spacing-wide: 0.02em;
  --font-letter-spacing-wider: 0.04em;
}

/* Radius presets — add `.radius-<name>` to :root (or any scope) to re-round
 * every component on the semantic radius tokens. Generated from tokens.json
 * radiusPresets. `default` equals the :root baseline (no class needed). */
.radius-square { --semantic-radius-control: 0px; --semantic-radius-interactive: 0px; --semantic-radius-container: 0px; --semantic-radius-pill: 0px; --semantic-radius-chart: 0px; }
.radius-sharp { --semantic-radius-control: 2px; --semantic-radius-interactive: 4px; --semantic-radius-container: 8px; --semantic-radius-pill: 9999px; --semantic-radius-chart: 2px; }
.radius-default { --semantic-radius-control: 4px; --semantic-radius-interactive: 8px; --semantic-radius-container: 12px; --semantic-radius-pill: 9999px; --semantic-radius-chart: 4px; }
.radius-rounded { --semantic-radius-control: 6px; --semantic-radius-interactive: 12px; --semantic-radius-container: 16px; --semantic-radius-pill: 9999px; --semantic-radius-chart: 6px; }