:root[data-theme="dark"],
[data-theme="dark"] {
  --clx-font-family-headline: 'Sora', sans-serif;
  --clx-font-family-body: 'Inter', sans-serif;
  --clx-font-family-arabic: 'Noto Sans Arabic', sans-serif;
  --clx-font-family-mono: 'JetBrains Mono', monospace;
  --clx-font-size-caption: 12px;
  --clx-font-size-small: 14px;
  --clx-font-size-body: 16px;
  --clx-font-size-heading-small: 24px;
  --clx-font-size-heading-medium: 32px;
  --clx-font-size-heading-large: 48px;
  --clx-font-weight-regular: 400;
  --clx-font-weight-medium: 500;
  --clx-font-weight-semibold: 600;
  --clx-font-weight-bold: 700;
  --clx-font-line-height-body: 1.5;
  --clx-font-line-height-heading: 1.15;
  --clx-space-1: 4px;
  --clx-space-2: 8px;
  --clx-space-3: 12px;
  --clx-space-4: 16px;
  --clx-space-6: 24px;
  --clx-space-8: 32px;
  --clx-space-12: 48px;
  --clx-radius-small: 4px;
  --clx-radius-control: 8px;
  --clx-radius-card: 12px;
  --clx-radius-dialog: 16px;
  --clx-radius-pill: 999px;
  --clx-shadow-small: 0 1px 3px rgb(16 27 45 / 0.10);
  --clx-shadow-medium: 0 8px 24px rgb(16 27 45 / 0.12);
  --clx-shadow-large: 0 18px 48px rgb(16 27 45 / 0.16);
  --clx-focus-width: 3px;
  --clx-focus-offset: 2px;
  --clx-motion-duration-fast: 150ms;
  --clx-motion-duration-normal: 250ms;
  --clx-motion-duration-slow: 400ms;
  --clx-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --clx-color-canvas: #0b1526;
  --clx-color-surface: #101b2d;
  --clx-color-surface-raised: #18263b;
  --clx-color-text: #f5f1e9;
  --clx-color-muted: #bcc4cf;
  --clx-color-border: #69758a;
  --clx-color-nav: #07101f;
  --clx-color-nav-text: #f5f1e9;
  --clx-color-action: #ff9766;
  --clx-color-on-action: #101b2d;
  --clx-color-action-hover: #ffb08b;
  --clx-color-focus: #ffb08b;
  --clx-color-disabled-surface: #344156;
  --clx-color-disabled-text: #c5ccd6;
  --clx-color-success: #7fe0ab;
  --clx-color-success-background: #133526;
  --clx-color-success-border: #7fe0ab;
  --clx-color-warning: #ffd27a;
  --clx-color-warning-background: #3b2c0f;
  --clx-color-warning-border: #ffd27a;
  --clx-color-error: #ff9c93;
  --clx-color-error-background: #421c1b;
  --clx-color-error-border: #ff9c93;
  --clx-color-info: #8bcbff;
  --clx-color-info-background: #122f49;
  --clx-color-info-border: #8bcbff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  --clx-font-family-headline: 'Sora', sans-serif;
  --clx-font-family-body: 'Inter', sans-serif;
  --clx-font-family-arabic: 'Noto Sans Arabic', sans-serif;
  --clx-font-family-mono: 'JetBrains Mono', monospace;
  --clx-font-size-caption: 12px;
  --clx-font-size-small: 14px;
  --clx-font-size-body: 16px;
  --clx-font-size-heading-small: 24px;
  --clx-font-size-heading-medium: 32px;
  --clx-font-size-heading-large: 48px;
  --clx-font-weight-regular: 400;
  --clx-font-weight-medium: 500;
  --clx-font-weight-semibold: 600;
  --clx-font-weight-bold: 700;
  --clx-font-line-height-body: 1.5;
  --clx-font-line-height-heading: 1.15;
  --clx-space-1: 4px;
  --clx-space-2: 8px;
  --clx-space-3: 12px;
  --clx-space-4: 16px;
  --clx-space-6: 24px;
  --clx-space-8: 32px;
  --clx-space-12: 48px;
  --clx-radius-small: 4px;
  --clx-radius-control: 8px;
  --clx-radius-card: 12px;
  --clx-radius-dialog: 16px;
  --clx-radius-pill: 999px;
  --clx-shadow-small: 0 1px 3px rgb(16 27 45 / 0.10);
  --clx-shadow-medium: 0 8px 24px rgb(16 27 45 / 0.12);
  --clx-shadow-large: 0 18px 48px rgb(16 27 45 / 0.16);
  --clx-focus-width: 3px;
  --clx-focus-offset: 2px;
  --clx-motion-duration-fast: 150ms;
  --clx-motion-duration-normal: 250ms;
  --clx-motion-duration-slow: 400ms;
  --clx-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --clx-color-canvas: #0b1526;
  --clx-color-surface: #101b2d;
  --clx-color-surface-raised: #18263b;
  --clx-color-text: #f5f1e9;
  --clx-color-muted: #bcc4cf;
  --clx-color-border: #69758a;
  --clx-color-nav: #07101f;
  --clx-color-nav-text: #f5f1e9;
  --clx-color-action: #ff9766;
  --clx-color-on-action: #101b2d;
  --clx-color-action-hover: #ffb08b;
  --clx-color-focus: #ffb08b;
  --clx-color-disabled-surface: #344156;
  --clx-color-disabled-text: #c5ccd6;
  --clx-color-success: #7fe0ab;
  --clx-color-success-background: #133526;
  --clx-color-success-border: #7fe0ab;
  --clx-color-warning: #ffd27a;
  --clx-color-warning-background: #3b2c0f;
  --clx-color-warning-border: #ffd27a;
  --clx-color-error: #ff9c93;
  --clx-color-error-background: #421c1b;
  --clx-color-error-border: #ff9c93;
  --clx-color-info: #8bcbff;
  --clx-color-info-background: #122f49;
  --clx-color-info-border: #8bcbff;
  }
}