/* Generated by design-tokens/scripts/build.mjs. Do not edit manually. */

@layer base {

  :root {
    --animate-accordion-down: accordion-down var(--motion-duration-normal) var(--motion-ease-enter);
    --animate-accordion-up: accordion-up var(--motion-duration-normal) var(--motion-ease-enter);
    --animate-fade-in: fade-in var(--motion-duration-fast) var(--motion-ease-enter);
    --animate-slide-in: slide-in var(--motion-duration-normal) var(--motion-ease-enter);
    --animate-slide-out: slide-out var(--motion-duration-fast) var(--motion-ease-exit);
    --border-control-active: var(--border-width-thin) var(--border-style-solid) var(--color-border-interactive-active);
    --border-control-default: var(--border-solid-neutral);
    --border-control-hover: var(--border-width-thin) var(--border-style-solid) var(--color-border-interactive-hover);
    --border-dashed-interactive: var(--border-width-strong) var(--border-style-dashed) var(--color-border-interactive-active);
    --border-dashed-neutral: var(--border-width-thin) var(--border-style-dashed) var(--color-border-default);
    --border-solid-interactive: var(--border-width-strong) var(--border-style-solid) var(--color-border-interactive-active);
    --border-solid-neutral: var(--border-width-thin) var(--border-style-solid) var(--color-border-default);
    --border-style-dashed: dashed;
    --border-style-solid: solid;
    --border-width-strong: 2px;
    --border-width-thin: 1px;
    --color-accent: #F1F1F1;
    --color-accent-foreground: #161616;
    --color-action-primary: var(--color-brand);
    --color-action-primary-active: var(--color-brand-active);
    --color-action-primary-foreground: #161616;
    --color-action-primary-hover: var(--color-brand-hover);
    --color-background: #FFFFFF;
    --color-background-secondary: #F8F8F8;
    --color-background-tertiary: #F1F1F1;
    --color-blue: #165DFF;
    --color-blue-foreground: #FFFFFF;
    --color-blue-hover: color-mix(in srgb, var(--color-blue) 88%, black 12%);
    --color-blue-muted: color-mix(in srgb, var(--color-blue) 15%, var(--color-background));
    --color-border: #DFDFDF;
    --color-border-default: var(--color-border);
    --color-border-interactive-active: var(--color-control-border-active);
    --color-border-interactive-hover: var(--color-control-border-hover);
    --color-border-subtle: #F1F1F1;
    --color-brand: #8E80F2;
    --color-brand-active: #6657C7;
    --color-brand-foreground: #161616;
    --color-brand-hover: #7A6CDD;
    --color-brand-muted: #F6F1FF;
    --color-brand-rgb: 142 128 242;
    --color-composer-icon-bg: color-mix(in srgb, var(--color-background-tertiary) 70%, transparent);
    --color-composer-icon-hover-bg: var(--color-background-tertiary);
    --color-control-border-active: var(--color-selection-border);
    --color-control-border-hover: color-mix(in srgb, var(--color-brand) 32%, var(--color-border) 68%);
    --color-cyan: #14C9C9;
    --color-cyan-foreground: #161616;
    --color-cyan-hover: color-mix(in srgb, var(--color-cyan) 88%, black 12%);
    --color-cyan-muted: color-mix(in srgb, var(--color-cyan) 15%, var(--color-background));
    --color-destructive: #F53F3F;
    --color-destructive-foreground: #161616;
    --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 88%, black 12%);
    --color-destructive-muted: color-mix(in srgb, var(--color-destructive) 15%, var(--color-background));
    --color-disabled-bg: #F1F1F1;
    --color-disabled-border: #DFDFDF;
    --color-disabled-fg: #8C8C8C;
    --color-editor-accent: var(--color-brand);
    --color-editor-accent-border: var(--color-selection-border);
    --color-editor-accent-muted: var(--color-brand-muted);
    --color-focus-ring: var(--color-brand);
    --color-foreground: #161616;
    --color-foreground-secondary: #656565;
    --color-foreground-tertiary: #8C8C8C;
    --color-icon-button-active-bg: color-mix(in srgb, var(--color-background-tertiary) 80%, var(--color-border) 20%);
    --color-icon-button-hover-bg: var(--color-background-tertiary);
    --color-icon-button-hover-fg: var(--color-foreground);
    --color-info-bg: color-mix(in srgb, var(--color-blue) 12%, var(--color-background));
    --color-info-border: color-mix(in srgb, var(--color-blue) 28%, var(--color-background));
    --color-info-fg: color-mix(in srgb, var(--color-blue) 84%, black 8%);
    --color-input: #DFDFDF;
    --color-link: var(--color-blue);
    --color-link-hover: var(--color-blue-hover);
    --color-muted: #F1F1F1;
    --color-muted-foreground: #656565;
    --color-neutral: #18181B;
    --color-neutral-foreground: #FFFFFF;
    --color-neutral-hover: color-mix(in srgb, var(--color-neutral) 88%, black 12%);
    --color-neutral-muted: color-mix(in srgb, var(--color-neutral) 15%, var(--color-background));
    --color-notice-error-background: color-mix(in srgb, var(--color-destructive) 12%, var(--color-background));
    --color-notice-error-border: color-mix(in srgb, var(--color-destructive) 32%, var(--color-background));
    --color-notice-error-foreground: color-mix(in srgb, var(--color-destructive) 88%, black 10%);
    --color-notice-info-background: var(--color-info-bg);
    --color-notice-info-border: var(--color-info-border);
    --color-notice-info-foreground: var(--color-info-fg);
    --color-notice-success-background: color-mix(in srgb, var(--color-success) 12%, var(--color-background));
    --color-notice-success-border: color-mix(in srgb, var(--color-success) 30%, var(--color-background));
    --color-notice-success-foreground: color-mix(in srgb, var(--color-success) 82%, black 10%);
    --color-notice-warning-background: color-mix(in srgb, var(--color-warning) 14%, var(--color-background));
    --color-notice-warning-border: color-mix(in srgb, var(--color-warning) 30%, var(--color-background));
    --color-notice-warning-foreground: color-mix(in srgb, var(--color-warning) 85%, black 10%);
    --color-overlay: rgb(29 33 41 / 0.32);
    --color-overlay-strong: rgb(29 33 41 / 0.32);
    --color-primary: #18181B;
    --color-primary-foreground: #FFFFFF;
    --color-progress: var(--color-blue);
    --color-progress-bg: var(--color-info-bg);
    --color-progress-fg: var(--color-info-fg);
    --color-purple: #722ED1;
    --color-purple-foreground: #FFFFFF;
    --color-purple-hover: color-mix(in srgb, var(--color-purple) 88%, black 12%);
    --color-purple-muted: color-mix(in srgb, var(--color-purple) 15%, var(--color-background));
    --color-ring: #18181B;
    --color-secondary: #F1F1F1;
    --color-secondary-foreground: #161616;
    --color-selection-bg: var(--color-brand-muted);
    --color-selection-border: color-mix(in srgb, var(--color-brand) 46%, var(--color-border) 54%);
    --color-selection-fg: var(--color-brand);
    --color-sidebar: #F8F8F8;
    --color-sidebar-accent: #F1F1F1;
    --color-sidebar-accent-foreground: #161616;
    --color-sidebar-border: #DFDFDF;
    --color-sidebar-foreground: #161616;
    --color-sidebar-ring: #18181B;
    --color-success: #00B42A;
    --color-success-foreground: #161616;
    --color-success-hover: color-mix(in srgb, var(--color-success) 88%, black 12%);
    --color-success-muted: color-mix(in srgb, var(--color-success) 15%, var(--color-background));
    --color-tooltip-bg: #18181B;
    --color-tooltip-border: color-mix(in srgb, var(--color-tooltip-bg) 72%, black 28%);
    --color-tooltip-fg: #FFFFFF;
    --color-warning: #FF7D00;
    --color-warning-foreground: #161616;
    --color-warning-hover: color-mix(in srgb, var(--color-warning) 88%, black 12%);
    --color-warning-muted: color-mix(in srgb, var(--color-warning) 15%, var(--color-background));
    --color-yellow: #FADC19;
    --color-yellow-foreground: #161616;
    --color-yellow-hover: color-mix(in srgb, var(--color-yellow) 85%, transparent);
    --color-yellow-muted: color-mix(in srgb, var(--color-yellow) 15%, var(--color-background));
    --cursor-interactive: pointer;
    --cursor-static: default;
    --focus-ring-offset: 2px;
    --focus-ring-width: 3px;
    --font-mono: "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;
    --font-preview: var(--font-sans);
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --leading-body-lg: 24px;
    --leading-body-md: 22px;
    --leading-body-md-strong: 22px;
    --leading-body-sm: 18px;
    --leading-body-xs: var(--leading-ui-caption);
    --leading-title-2xl: 56px;
    --leading-title-3xl: 62px;
    --leading-title-lg: 32px;
    --leading-title-md: 28px;
    --leading-title-sm: 24px;
    --leading-title-xl: 44px;
    --leading-ui-body-default: 22px;
    --leading-ui-body-large: 24px;
    --leading-ui-body-small: 18px;
    --leading-ui-caption: 16px;
    --leading-ui-title-default: 28px;
    --leading-ui-title-large: 32px;
    --leading-ui-title-small: 24px;
    --motion-duration-fast: 150ms;
    --motion-duration-normal: 200ms;
    --motion-duration-reduced: 0ms;
    --motion-duration-slow: 300ms;
    --motion-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
    --motion-ease-enter: cubic-bezier(0.4, 1, 0.6, 1);
    --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --radius-composer-icon-button: var(--radius-icon-button);
    --radius-full: 9999px;
    --radius-icon-button: var(--radius-md);
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-xl: 16px;
    --radius-xs: 2px;
    --shadow-bar-bottom: 0 -3px 6px -2px rgb(0 0 0 / 0.08);
    --shadow-bar-top: 0 3px 6px -2px rgb(0 0 0 / 0.08);
    --shadow-border-control-active: 0 0 0 1px var(--color-border-interactive-active);
    --shadow-popover: 0 4px 12px rgb(0 0 0 / 0.20);
    --shadow-raised: 0 1px 1px rgb(0 0 0 / 0.02);
    --shadow-sticky-end: -2px 0 4px -2px rgb(0 0 0 / 0.08);
    --shadow-sticky-start: 2px 0 4px -2px rgb(0 0 0 / 0.08);
    --size-composer-icon-button: var(--size-control-md);
    --size-composer-icon-glyph: var(--size-icon-sm);
    --size-container-080: 80px;
    --size-container-096: 96px;
    --size-container-128: 128px;
    --size-container-1280: 1280px;
    --size-container-1440: 1440px;
    --size-container-160: 160px;
    --size-container-1600: 1600px;
    --size-container-200: 200px;
    --size-container-240: 240px;
    --size-container-280: 280px;
    --size-container-320: 320px;
    --size-container-360: 360px;
    --size-container-400: 400px;
    --size-container-480: 480px;
    --size-container-560: 560px;
    --size-container-640: 640px;
    --size-container-720: 720px;
    --size-container-800: 800px;
    --size-container-960: 960px;
    --size-control-lg: 36px;
    --size-control-md: 32px;
    --size-control-sm: 28px;
    --size-control-xl: 40px;
    --size-control-xs: 24px;
    --size-icon-2xl: 28px;
    --size-icon-3xl: 32px;
    --size-icon-4xl: 48px;
    --size-icon-action: var(--size-icon-md);
    --size-icon-lg: 20px;
    --size-icon-md: 16px;
    --size-icon-sm: 14px;
    --size-icon-xl: 24px;
    --size-icon-xs: 12px;
    --space-0: 0px;
    --space-025: 2px;
    --space-050: 4px;
    --space-075: 6px;
    --space-100: 8px;
    --space-1000: 80px;
    --space-150: 12px;
    --space-200: 16px;
    --space-250: 20px;
    --space-300: 24px;
    --space-350: 28px;
    --space-400: 32px;
    --space-450: 36px;
    --space-500: 40px;
    --space-550: 44px;
    --space-600: 48px;
    --space-800: 64px;
    --space-composer-icon-gap: var(--space-050);
    --stroke-icon-action: 1.5;
    --text-body-lg: 16px;
    --text-body-md: 14px;
    --text-body-md-strong: 14px;
    --text-body-sm: 12px;
    --text-body-xs: var(--text-ui-caption);
    --text-title-2xl: 48px;
    --text-title-3xl: 56px;
    --text-title-lg: 24px;
    --text-title-md: 20px;
    --text-title-sm: 16px;
    --text-title-xl: 36px;
    --text-ui-body-default: 14px;
    --text-ui-body-large: 16px;
    --text-ui-body-small: 12px;
    --text-ui-caption: 11px;
    --text-ui-title-default: 20px;
    --text-ui-title-large: 24px;
    --text-ui-title-small: 16px;
    --weight-body-lg: 400;
    --weight-body-md: 400;
    --weight-body-md-strong: 500;
    --weight-body-sm: 400;
    --weight-body-xs: 400;
    --weight-title-2xl: 500;
    --weight-title-3xl: 500;
    --weight-title-lg: 500;
    --weight-title-md: 500;
    --weight-title-sm: 500;
    --weight-title-xl: 500;
    --weight-ui-title-default: 500;
    --weight-ui-title-large: 500;
    --weight-ui-title-small: 500;
    --z-modal: 60;
    --z-popover: 50;
    --z-sticky-cell: 10;
    --z-sticky-corner: 30;
    --z-sticky-header: 20;
    --z-toast: 70;
  }

  .dark {
    --animate-accordion-down: accordion-down var(--motion-duration-normal) var(--motion-ease-enter);
    --animate-accordion-up: accordion-up var(--motion-duration-normal) var(--motion-ease-enter);
    --animate-fade-in: fade-in var(--motion-duration-fast) var(--motion-ease-enter);
    --animate-slide-in: slide-in var(--motion-duration-normal) var(--motion-ease-enter);
    --animate-slide-out: slide-out var(--motion-duration-fast) var(--motion-ease-exit);
    --border-control-active: var(--border-width-thin) var(--border-style-solid) var(--color-border-interactive-active);
    --border-control-default: var(--border-solid-neutral);
    --border-control-hover: var(--border-width-thin) var(--border-style-solid) var(--color-border-interactive-hover);
    --border-dashed-interactive: var(--border-width-strong) var(--border-style-dashed) var(--color-border-interactive-active);
    --border-dashed-neutral: var(--border-width-thin) var(--border-style-dashed) var(--color-border-default);
    --border-solid-interactive: var(--border-width-strong) var(--border-style-solid) var(--color-border-interactive-active);
    --border-solid-neutral: var(--border-width-thin) var(--border-style-solid) var(--color-border-default);
    --border-style-dashed: dashed;
    --border-style-solid: solid;
    --border-width-strong: 2px;
    --border-width-thin: 1px;
    --color-accent: #111113;
    --color-accent-foreground: #F1F1F1;
    --color-action-primary: var(--color-brand);
    --color-action-primary-active: var(--color-brand-active);
    --color-action-primary-foreground: #161616;
    --color-action-primary-hover: var(--color-brand-hover);
    --color-background: #0B0B0C;
    --color-background-secondary: #0E0E10;
    --color-background-tertiary: #111113;
    --color-blue: #165DFF;
    --color-blue-foreground: #FFFFFF;
    --color-blue-hover: color-mix(in srgb, var(--color-blue) 88%, white 12%);
    --color-blue-muted: color-mix(in srgb, var(--color-blue) 15%, var(--color-background));
    --color-border: #424244;
    --color-border-default: var(--color-border);
    --color-border-interactive-active: var(--color-control-border-active);
    --color-border-interactive-hover: var(--color-control-border-hover);
    --color-border-subtle: #424244;
    --color-brand: #9D91F5;
    --color-brand-active: #786ADA;
    --color-brand-foreground: #161616;
    --color-brand-hover: #8A7CEE;
    --color-brand-muted: #2B245B;
    --color-brand-rgb: 157 145 245;
    --color-composer-icon-bg: color-mix(in srgb, var(--color-background-tertiary) 70%, transparent);
    --color-composer-icon-hover-bg: var(--color-background-tertiary);
    --color-control-border-active: var(--color-selection-border);
    --color-control-border-hover: color-mix(in srgb, var(--color-brand) 32%, var(--color-border) 68%);
    --color-cyan: #14C9C9;
    --color-cyan-foreground: #161616;
    --color-cyan-hover: color-mix(in srgb, var(--color-cyan) 88%, white 12%);
    --color-cyan-muted: color-mix(in srgb, var(--color-cyan) 15%, var(--color-background));
    --color-destructive: #F53F3F;
    --color-destructive-foreground: #161616;
    --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 88%, white 12%);
    --color-destructive-muted: color-mix(in srgb, var(--color-destructive) 15%, var(--color-background));
    --color-disabled-bg: #111113;
    --color-disabled-border: #424244;
    --color-disabled-fg: #6B6B6D;
    --color-editor-accent: var(--color-brand);
    --color-editor-accent-border: var(--color-selection-border);
    --color-editor-accent-muted: var(--color-brand-muted);
    --color-focus-ring: var(--color-brand);
    --color-foreground: #F1F1F1;
    --color-foreground-secondary: #8B8B8B;
    --color-foreground-tertiary: #6B6B6D;
    --color-icon-button-active-bg: color-mix(in srgb, var(--color-background-tertiary) 78%, var(--color-border) 22%);
    --color-icon-button-hover-bg: var(--color-background-tertiary);
    --color-icon-button-hover-fg: var(--color-foreground);
    --color-info-bg: color-mix(in srgb, var(--color-blue) 16%, var(--color-background));
    --color-info-border: color-mix(in srgb, var(--color-blue) 34%, var(--color-background));
    --color-info-fg: color-mix(in srgb, var(--color-blue) 90%, white 6%);
    --color-input: #424244;
    --color-link: var(--color-blue);
    --color-link-hover: var(--color-blue-hover);
    --color-muted: #111113;
    --color-muted-foreground: #8B8B8B;
    --color-neutral: #18181B;
    --color-neutral-foreground: #FFFFFF;
    --color-neutral-hover: color-mix(in srgb, var(--color-neutral) 88%, white 12%);
    --color-neutral-muted: color-mix(in srgb, var(--color-neutral) 15%, var(--color-background));
    --color-notice-error-background: color-mix(in srgb, var(--color-destructive) 14%, var(--color-background));
    --color-notice-error-border: color-mix(in srgb, var(--color-destructive) 36%, var(--color-background));
    --color-notice-error-foreground: color-mix(in srgb, var(--color-destructive) 92%, white 6%);
    --color-notice-info-background: var(--color-info-bg);
    --color-notice-info-border: var(--color-info-border);
    --color-notice-info-foreground: var(--color-info-fg);
    --color-notice-success-background: color-mix(in srgb, var(--color-success) 14%, var(--color-background));
    --color-notice-success-border: color-mix(in srgb, var(--color-success) 32%, var(--color-background));
    --color-notice-success-foreground: color-mix(in srgb, var(--color-success) 86%, white 6%);
    --color-notice-warning-background: color-mix(in srgb, var(--color-warning) 16%, var(--color-background));
    --color-notice-warning-border: color-mix(in srgb, var(--color-warning) 36%, var(--color-background));
    --color-notice-warning-foreground: color-mix(in srgb, var(--color-warning) 90%, white 6%);
    --color-overlay: rgb(29 33 41 / 0.32);
    --color-overlay-strong: rgb(29 33 41 / 0.32);
    --color-primary: #F1F1F1;
    --color-primary-foreground: #18181B;
    --color-progress: var(--color-blue);
    --color-progress-bg: var(--color-info-bg);
    --color-progress-fg: var(--color-info-fg);
    --color-purple: #722ED1;
    --color-purple-foreground: #FFFFFF;
    --color-purple-hover: color-mix(in srgb, var(--color-purple) 88%, white 12%);
    --color-purple-muted: color-mix(in srgb, var(--color-purple) 15%, var(--color-background));
    --color-ring: #D5D5D6;
    --color-secondary: #111113;
    --color-secondary-foreground: #F1F1F1;
    --color-selection-bg: var(--color-brand-muted);
    --color-selection-border: color-mix(in srgb, var(--color-brand) 46%, var(--color-border) 54%);
    --color-selection-fg: var(--color-brand);
    --color-sidebar: #0E0E10;
    --color-sidebar-accent: #111113;
    --color-sidebar-accent-foreground: #F1F1F1;
    --color-sidebar-border: #424244;
    --color-sidebar-foreground: #F1F1F1;
    --color-sidebar-ring: #ACACAD;
    --color-success: #00B42A;
    --color-success-foreground: #161616;
    --color-success-hover: color-mix(in srgb, var(--color-success) 88%, white 12%);
    --color-success-muted: color-mix(in srgb, var(--color-success) 15%, var(--color-background));
    --color-tooltip-bg: #18181B;
    --color-tooltip-border: color-mix(in srgb, var(--color-tooltip-bg) 72%, black 28%);
    --color-tooltip-fg: #FFFFFF;
    --color-warning: #FF7D00;
    --color-warning-foreground: #161616;
    --color-warning-hover: color-mix(in srgb, var(--color-warning) 88%, white 12%);
    --color-warning-muted: color-mix(in srgb, var(--color-warning) 15%, var(--color-background));
    --color-yellow: #FADC19;
    --color-yellow-foreground: #161616;
    --color-yellow-hover: color-mix(in srgb, var(--color-yellow) 85%, transparent);
    --color-yellow-muted: color-mix(in srgb, var(--color-yellow) 15%, var(--color-background));
    --cursor-interactive: pointer;
    --cursor-static: default;
    --focus-ring-offset: 2px;
    --focus-ring-width: 3px;
    --font-mono: "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;
    --font-preview: var(--font-sans);
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --leading-body-lg: 24px;
    --leading-body-md: 22px;
    --leading-body-md-strong: 22px;
    --leading-body-sm: 18px;
    --leading-body-xs: var(--leading-ui-caption);
    --leading-title-2xl: 56px;
    --leading-title-3xl: 62px;
    --leading-title-lg: 32px;
    --leading-title-md: 28px;
    --leading-title-sm: 24px;
    --leading-title-xl: 44px;
    --leading-ui-body-default: 22px;
    --leading-ui-body-large: 24px;
    --leading-ui-body-small: 18px;
    --leading-ui-caption: 16px;
    --leading-ui-title-default: 28px;
    --leading-ui-title-large: 32px;
    --leading-ui-title-small: 24px;
    --motion-duration-fast: 150ms;
    --motion-duration-normal: 200ms;
    --motion-duration-reduced: 0ms;
    --motion-duration-slow: 300ms;
    --motion-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
    --motion-ease-enter: cubic-bezier(0.4, 1, 0.6, 1);
    --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --radius-composer-icon-button: var(--radius-icon-button);
    --radius-full: 9999px;
    --radius-icon-button: var(--radius-md);
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-xl: 16px;
    --radius-xs: 2px;
    --shadow-bar-bottom: 0 -3px 6px -2px rgb(0 0 0 / 0.08);
    --shadow-bar-top: 0 3px 6px -2px rgb(0 0 0 / 0.08);
    --shadow-border-control-active: 0 0 0 1px var(--color-border-interactive-active);
    --shadow-popover: 0 4px 12px rgb(0 0 0 / 0.20);
    --shadow-raised: 0 1px 1px rgb(0 0 0 / 0.02);
    --shadow-sticky-end: -2px 0 4px -2px rgb(0 0 0 / 0.08);
    --shadow-sticky-start: 2px 0 4px -2px rgb(0 0 0 / 0.08);
    --size-composer-icon-button: var(--size-control-md);
    --size-composer-icon-glyph: var(--size-icon-sm);
    --size-container-080: 80px;
    --size-container-096: 96px;
    --size-container-128: 128px;
    --size-container-1280: 1280px;
    --size-container-1440: 1440px;
    --size-container-160: 160px;
    --size-container-1600: 1600px;
    --size-container-200: 200px;
    --size-container-240: 240px;
    --size-container-280: 280px;
    --size-container-320: 320px;
    --size-container-360: 360px;
    --size-container-400: 400px;
    --size-container-480: 480px;
    --size-container-560: 560px;
    --size-container-640: 640px;
    --size-container-720: 720px;
    --size-container-800: 800px;
    --size-container-960: 960px;
    --size-control-lg: 36px;
    --size-control-md: 32px;
    --size-control-sm: 28px;
    --size-control-xl: 40px;
    --size-control-xs: 24px;
    --size-icon-2xl: 28px;
    --size-icon-3xl: 32px;
    --size-icon-4xl: 48px;
    --size-icon-action: var(--size-icon-md);
    --size-icon-lg: 20px;
    --size-icon-md: 16px;
    --size-icon-sm: 14px;
    --size-icon-xl: 24px;
    --size-icon-xs: 12px;
    --space-0: 0px;
    --space-025: 2px;
    --space-050: 4px;
    --space-075: 6px;
    --space-100: 8px;
    --space-1000: 80px;
    --space-150: 12px;
    --space-200: 16px;
    --space-250: 20px;
    --space-300: 24px;
    --space-350: 28px;
    --space-400: 32px;
    --space-450: 36px;
    --space-500: 40px;
    --space-550: 44px;
    --space-600: 48px;
    --space-800: 64px;
    --space-composer-icon-gap: var(--space-050);
    --stroke-icon-action: 1.5;
    --text-body-lg: 16px;
    --text-body-md: 14px;
    --text-body-md-strong: 14px;
    --text-body-sm: 12px;
    --text-body-xs: var(--text-ui-caption);
    --text-title-2xl: 48px;
    --text-title-3xl: 56px;
    --text-title-lg: 24px;
    --text-title-md: 20px;
    --text-title-sm: 16px;
    --text-title-xl: 36px;
    --text-ui-body-default: 14px;
    --text-ui-body-large: 16px;
    --text-ui-body-small: 12px;
    --text-ui-caption: 11px;
    --text-ui-title-default: 20px;
    --text-ui-title-large: 24px;
    --text-ui-title-small: 16px;
    --weight-body-lg: 400;
    --weight-body-md: 400;
    --weight-body-md-strong: 500;
    --weight-body-sm: 400;
    --weight-body-xs: 400;
    --weight-title-2xl: 500;
    --weight-title-3xl: 500;
    --weight-title-lg: 500;
    --weight-title-md: 500;
    --weight-title-sm: 500;
    --weight-title-xl: 500;
    --weight-ui-title-default: 500;
    --weight-ui-title-large: 500;
    --weight-ui-title-small: 500;
    --z-modal: 60;
    --z-popover: 50;
    --z-sticky-cell: 10;
    --z-sticky-corner: 30;
    --z-sticky-header: 20;
    --z-toast: 70;
  }

}



@keyframes slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-8px); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}