/*
 * Themeable design tokens shared by the site's public, shop, and account UI.
 * Keep component styles on semantic names; override these values per website
 * or theme without changing the components.
 */
:root {
  /* Brand and surface colors */
  --ds-color-canvas: #fcf9f5;
  --ds-color-surface: #f7efe9;
  --ds-color-surface-raised: #fffdfa;
  --ds-color-surface-soft: #f1e2de;
  --ds-color-surface-tint: #ead4d1;
  --ds-color-brand: #9b3d56;
  --ds-color-brand-strong: #7d2f45;
  --ds-color-brand-mid: #3a1523;
  --ds-color-brand-deep: #2b0f1a;
  --ds-color-accent: #a8724a;
  --ds-color-ink: #2b0f1a;
  --ds-color-ink-soft: #5b4650;
  --ds-color-muted: #85705f;
  --ds-color-form-muted: #6f5b4c;
  --ds-color-on-brand: #f6ece6;
  --ds-color-border: rgba(155, 61, 86, .18);
  --ds-color-success: #38765c;
  --ds-color-warning: #986b22;
  --ds-color-danger: #b4544a;

  /* Typography */
  --ds-font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --ds-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-label: var(--ds-font-body);
  --ds-font-legacy-display: 'DM Serif Display', Georgia, serif;
  --ds-font-legacy-body: 'Instrument Sans', system-ui, sans-serif;
  --ds-text-xs: .6875rem;
  --ds-text-sm: .875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.25rem;
  --ds-text-xl: clamp(1.75rem, 3vw, 2.5rem);
  --ds-text-display: clamp(2.5rem, 6vw, 5.5rem);
  --ds-line-body: 1.6;
  --ds-line-heading: 1.08;

  /* Spacing, sizing, and layout */
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-control-height: 2.75rem;
  --ds-content-width: 90rem;
  --ds-page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --ds-button-padding-block: .875rem;
  --ds-button-padding-inline: 1.875rem;
  --ds-button-radius: var(--ds-radius-pill);
  --ds-card-radius: .375rem;
  --ds-card-padding-block: 1.25rem;
  --ds-card-padding-inline: 1.375rem;
  --ds-panel-padding-block: 1.75rem;
  --ds-panel-padding-inline: 1.875rem;
  --ds-panel-radius: .5rem;
  --ds-field-padding-block: .6875rem;
  --ds-field-padding-inline: .875rem;

  /* Corners, borders, and elevation */
  --ds-radius-sm: .25rem;
  --ds-radius-md: .75rem;
  --ds-radius-lg: 1.25rem;
  --ds-radius-pill: 999px;
  --ds-border-width: 1px;
  --ds-shadow-card: 0 2px 4px rgba(43, 15, 26, .05), 0 22px 48px rgba(43, 15, 26, .10);
  --ds-shadow-soft: 0 1px 2px rgba(43, 15, 26, .05), 0 6px 18px rgba(43, 15, 26, .06);

  /* Earlier site palette remains available for components still using it. */
  --ds-legacy-canvas: #faf3ea;
  --ds-legacy-surface: #f2e3d5;
  --ds-legacy-ink: #4a3530;
  --ds-legacy-ink-soft: #7d6459;
  --ds-legacy-muted: #a58d80;
  --ds-legacy-brand: #d99cae;
  --ds-legacy-brand-strong: #c06e86;
  --ds-legacy-sage: #7d8a72;
  --ds-legacy-border: #e9d9d2;
  --ds-legacy-on-canvas: #fffbf6;
  --ds-legacy-accent: #c48a5f;

  /* Account and admin surfaces can be themed independently from marketing pages. */
  --ds-account-canvas: #faf4f0;
  --ds-account-surface: #fdf8f5;
  --ds-account-surface-muted: #f3e8e2;
  --ds-account-ink: #1a0a10;
  --ds-account-ink-soft: #5a3540;
  --ds-account-muted: #9b7880;
  --ds-account-brand: #9b3d56;
  --ds-account-brand-wash: #f0dde4;
  --ds-account-border: rgba(155, 61, 86, .15);
  --ds-account-font-body: 'Instrument Sans', system-ui, sans-serif;
}