:root {
  --cc-color-ink: #111827;
  --cc-color-muted: #5f6b7a;
  --cc-color-surface: #ffffff;
  --cc-color-soft: #f5f1e8;
  --cc-color-line: rgba(17, 24, 39, 0.14);
  --cc-color-brand: #8b4513;
  --cc-color-brand-strong: #4b260f;
  --cc-color-success: #166534;
  --cc-color-warning: #92400e;
  --cc-color-danger: #991b1b;
  --cc-radius-sm: 10px;
  --cc-radius-md: 16px;
  --cc-radius-lg: 24px;
  --cc-radius-xl: 32px;
  --cc-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.10);
  --cc-shadow-card: 0 12px 28px rgba(15, 23, 42, 0.08);
  --cc-font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  --cc-font-en: "Fraunces", "Aptos", Georgia, serif;
  --cc-font-ui: "IBM Plex Sans Arabic", "Aptos", system-ui, sans-serif;
  --cc-space-1: 0.25rem;
  --cc-space-2: 0.5rem;
  --cc-space-3: 0.75rem;
  --cc-space-4: 1rem;
  --cc-space-5: 1.5rem;
  --cc-space-6: 2rem;
  --cc-space-7: 3rem;
  --cc-max-page: 1180px;
}

[dir="ltr"] {
  --cc-font-ui: "Aptos", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}