:root {
  color-scheme: light;

  /* Brand and semantic color system */
  --ds-color-canvas: #fffdfb;
  --ds-color-surface: #ffffff;
  --ds-color-surface-soft: #fdf6f3;
  --ds-color-surface-pink: #fbedf2;
  --ds-color-surface-muted: #f7f2f1;
  --ds-color-text: #3b1730;
  --ds-color-text-muted: #765b68;
  --ds-color-text-subtle: #9b8490;
  --ds-color-border: rgba(72, 39, 55, 0.14);
  --ds-color-border-strong: rgba(72, 39, 55, 0.24);
  --ds-color-accent: #b5306f;
  --ds-color-accent-hover: #9d285f;
  --ds-color-accent-soft: #f8dce8;
  --ds-color-accent-contrast: #ffffff;
  --ds-color-success: #3d7b63;
  --ds-color-warning: #9a6a28;
  --ds-color-error: #9c3150;
  --ds-color-disabled: #d9cfd4;

  /* Typography */
  --ds-font-family: "Montserrat", Arial, sans-serif;
  --ds-font-size-display: clamp(3.5rem, 7.2vw, 7rem);
  --ds-font-size-h1: clamp(2.25rem, 5vw, 4.75rem);
  --ds-font-size-h2: clamp(1.9rem, 3.8vw, 3.5rem);
  --ds-font-size-h3: clamp(1.25rem, 2vw, 1.75rem);
  --ds-font-size-body: clamp(0.94rem, 0.9rem + 0.15vw, 1.05rem);
  --ds-font-size-body-small: 0.875rem;
  --ds-font-size-caption: 0.75rem;
  --ds-font-size-label: 0.72rem;
  --ds-font-size-button: 0.78rem;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 600;
  --ds-font-weight-semibold: 700;
  --ds-font-weight-bold: 800;
  --ds-line-height-tight: 1.08;
  --ds-line-height-heading: 1.16;
  --ds-line-height-body: 1.65;

  /* Spacing */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  /* Shape, elevation and controls */
  --ds-radius-sm: 10px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 24px;
  --ds-radius-xl: 32px;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 8px 24px rgba(68, 35, 51, 0.07);
  --ds-shadow-md: 0 18px 48px rgba(68, 35, 51, 0.1);
  --ds-shadow-lg: 0 32px 88px rgba(68, 35, 51, 0.14);
  --ds-control-height-sm: 42px;
  --ds-control-height: 52px;
  --ds-control-height-lg: 60px;
  --ds-focus-ring: 0 0 0 4px rgba(181, 48, 111, 0.2);

  /* Motion */
  --ds-motion-fast: 140ms;
  --ds-motion-base: 200ms;
  --ds-motion-slow: 320ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Backwards-compatible aliases while legacy rules are migrated by stage. */
  --white: var(--ds-color-surface);
  --milk: var(--ds-color-surface-soft);
  --cream: var(--ds-color-surface-soft);
  --ink: var(--ds-color-text);
  --muted: var(--ds-color-text-muted);
  --line: var(--ds-color-border);
  --glass: rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --shadow: var(--ds-shadow-lg);
  --shadow-deep: var(--ds-shadow-lg);
  --radius: var(--ds-radius-xl);
  --radius-soft: var(--ds-radius-lg);
  --accent: var(--ds-color-accent);
  --accent-dark: var(--ds-color-text);
  --gold: #b88d55;
}

.ui-button,
.ui-card,
.ui-field,
.ui-modal-shell,
.ui-status {
  font-family: var(--ds-font-family);
}

.ui-button {
  min-height: var(--ds-control-height);
  padding-inline: var(--ds-space-5);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-pill);
  color: var(--ds-color-accent-contrast);
  background: var(--ds-color-accent);
  box-shadow: var(--ds-shadow-sm);
  font-size: var(--ds-font-size-button);
  font-weight: var(--ds-font-weight-bold);
}

.ui-card,
.ui-modal-shell {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-md);
}

.ui-field {
  min-height: var(--ds-control-height);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text);
  background: var(--ds-color-surface);
}

.ui-status {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-muted);
  background: var(--ds-color-surface-soft);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-motion-fast: 0ms;
    --ds-motion-base: 0ms;
    --ds-motion-slow: 0ms;
  }
}