:root,
:root[data-theme="light"] {
  --clx-font-family-headline: 'Bungee', sans-serif;
  --clx-font-family-body: 'Bitter', serif;
  --clx-font-family-arabic: 'Noto Naskh Arabic', serif;
  --clx-font-family-mono: 'Bitter', serif;
  --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.6;
  --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: 0px;
  --clx-radius-control: 0px;
  --clx-radius-card: 0px;
  --clx-radius-dialog: 0px;
  --clx-radius-pill: 0px;
  --clx-shadow-small: none;
  --clx-shadow-medium: 0 8px 24px rgb(36 60 52 / 0.10);
  --clx-shadow-large: 0 18px 48px rgb(36 60 52 / 0.16);
  --clx-focus-width: 3px;
  --clx-focus-offset: 4px;
  --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: #fff3cf;
  --clx-color-surface: #fff6d9;
  --clx-color-surface-raised: #fff6d9;
  --clx-color-surface-soft: #f2e2b2;
  --clx-color-text: #243c34;
  --clx-color-muted: #5f634f;
  --clx-color-border: #b9ac7c;
  --clx-color-nav: #006b65;
  --clx-color-nav-text: #fff6d9;
  --clx-color-action: #006b65;
  --clx-color-on-action: #fff6d9;
  --clx-color-action-hover: #005b56;
  --clx-color-focus: #b63025;
  --clx-color-coral: #bd372a;
  --clx-color-mustard: #edba3d;
  --clx-color-disabled-surface: #f2e2b2;
  --clx-color-disabled-text: #5f634f;
  --clx-color-success: #006b65;
  --clx-color-success-background: #fff3cf;
  --clx-color-success-border: #006b65;
  --clx-color-warning: #243c34;
  --clx-color-warning-background: #edba3d;
  --clx-color-warning-border: #5f634f;
  --clx-color-error: #8c3324;
  --clx-color-error-background: #f5d6ba;
  --clx-color-error-border: #bd372a;
  --clx-color-info: #006b65;
  --clx-color-info-background: #f2e2b2;
  --clx-color-info-border: #006b65;
}