:root,
:root[data-theme="light"] {
  --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: #f5f1e9;
  --clx-color-surface: #fffdfa;
  --clx-color-surface-raised: #ffffff;
  --clx-color-text: #101b2d;
  --clx-color-muted: #596371;
  --clx-color-border: #837a6f;
  --clx-color-nav: #101b2d;
  --clx-color-nav-text: #f5f1e9;
  --clx-color-action: #c63f20;
  --clx-color-on-action: #ffffff;
  --clx-color-action-hover: #a83219;
  --clx-color-focus: #c63f20;
  --clx-color-disabled-surface: #ded8cf;
  --clx-color-disabled-text: #625f5a;
  --clx-color-success: #216e4a;
  --clx-color-success-background: #e3f4eb;
  --clx-color-success-border: #216e4a;
  --clx-color-warning: #7a4d00;
  --clx-color-warning-background: #fff0c2;
  --clx-color-warning-border: #7a4d00;
  --clx-color-error: #a82416;
  --clx-color-error-background: #fce7e4;
  --clx-color-error-border: #a82416;
  --clx-color-info: #245b8a;
  --clx-color-info-background: #e5f0fa;
  --clx-color-info-border: #245b8a;
}