:root {
  --ds-font-family: "Josefin Sans", sans-serif;
  --ds-font-size-base: 16px;
  --ds-line-height: 1.6;
  --ds-heading-scale: 1.25;

  --ds-color-background: #ffffff;
  --ds-color-surface: #ffffff;
  --ds-color-text: #111827;
  --ds-color-secondary: #6b7280;
  --ds-color-border: #e5e7eb;
  --ds-color-primary: #111827;
  --ds-color-accent: #2563eb;

  --ds-border-radius: 12px;
  --ds-border-width: 1px;

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10);
  --ds-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.16);

  --ds-spacing-unit: 4px;
  --ds-container-max-width: 1200px;
  --ds-container-padding: 20px;
  --ds-grid-gap: 16px;
  --ds-header-height: 64px;

  --ds-animation-duration: 180ms;
  --ds-animation-easing: cubic-bezier(0.2, 0.8, 0.2, 1);

  --ds-bg-opacity: 0.05;
  --ds-bg-color: var(--ds-color-text);

  --ds-brand-pastel-peach: #F3E5DC;
  --ds-brand-pastel-green: #E0E8DF;
  --ds-brand-pastel-pink: #F8E1E7;
  --ds-brand-pastel-blue: #D6E4EB;
  --ds-brand-pastel-lavender: #EDDFEE;
}

[data-theme="dark"] {
  --ds-color-background: #0b0f19;
  --ds-color-surface: #0f1524;
  --ds-color-text: #e5e7eb;
  --ds-color-secondary: #9ca3af;
  --ds-color-border: rgba(229, 231, 235, 0.14);
  --ds-color-primary: #e5e7eb;
  --ds-color-accent: #93c5fd;
}