:root {
  color-scheme: light;

  /* Colors */
  --color-surface: #f4f2e8;
  --color-card: #fdfdfb;
  --color-raised: #ebe6de;
  --color-ink: #16211b;
  --color-ink-muted: #5c655e;
  --color-accent: #e76459;
  --color-accent-hover: #d4544a;
  --color-on-accent: #ffffff;
  --color-accent-deep: #c4483e;
  --color-border: #e3dfd2;
  --color-panel-green: #d9e4cc;
  --color-panel-pink: #fae1df;
  --color-forest: #2d4938;
  --color-sand: #b5a278;
  --color-on-ink: #f4f2e8;
  --color-danger: oklch(58% 0.18 22);
  --color-success: oklch(60% 0.14 145);
  --color-warning: oklch(78% 0.16 75);
  --color-info: oklch(58% 0.13 240);

  /* Spacing: 8px rhythm with 4px base unit */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 56px;
  --space-9: 64px;
  --space-10: 72px;
  --space-11: 80px;
  --space-12: 96px;

  /* Typography */
  --font-sans: "Vazirmatn", "Segoe UI", system-ui, Tahoma, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.04rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.28rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.54rem + 1.5vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Forms */
  --control-height: 44px;
  --control-padding-x: var(--space-3);
  --control-border-width: 1px;
  --focus-ring: 0 0 0 3px oklch(from var(--color-accent-deep) l c h / 0.35);

  /* Typography details */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.3;
  --line-height-snug: 1.5;
  --line-height-normal: 1.8;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;

  /* Breakpoints (reference values: CSS variables cannot be used inside @media) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Layout */
  --container-max: 1180px;
  --z-toast: 500;

  /* Elevation */
  --shadow-sm: 0 1px 2px oklch(22% 0.02 160 / 0.06);
  --shadow-md: 0 6px 16px oklch(22% 0.02 160 / 0.08);
  --shadow-lg: 0 16px 40px oklch(22% 0.02 160 / 0.12);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layering */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-surface: #111a15;
  --color-card: #18231d;
  --color-raised: #212e26;
  --color-ink: #f4f2e8;
  --color-ink-muted: #a3aaa2;
  --color-accent: #ee7a6f;
  --color-accent-hover: #f48f85;
  --color-on-accent: #111a15;
  --color-accent-deep: #ee7a6f;
  --color-border: #2c3a31;
  --color-panel-green: #243a2c;
  --color-panel-pink: #3b2625;
  --color-forest: #4a7058;
  --color-sand: #c9b78c;
  --color-on-ink: #111a15;
  --color-danger: oklch(68% 0.16 22);
  --color-success: oklch(70% 0.13 145);
  --color-warning: oklch(80% 0.13 75);
  --color-info: oklch(68% 0.11 240);
  --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.60),
               0 0 0 1px oklch(100% 0 0 / 0.08),
               inset 0 1px 0 oklch(100% 0 0 / 0.04);
  --shadow-md: 0 6px 20px oklch(0% 0 0 / 0.80),
               0 0 0 1px oklch(100% 0 0 / 0.16),
               inset 0 1px 0 oklch(100% 0 0 / 0.08);
  --shadow-lg: 0 16px 48px oklch(0% 0 0 / 0.90),
               0 0 0 1px oklch(100% 0 0 / 0.26),
               inset 0 1px 0 oklch(100% 0 0 / 0.14);
}