:root {
  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 9rem;
  --space-3xl: 12rem;

  /* Brand colors mapped to theme.json presets with fallbacks */
  --color-primary: var(--wp--preset--color--cherries, #A22452);
  --color-secondary: var(--wp--preset--color--saffron, #FFA500);
  --color-misted: var(--wp--preset--color--misted-yellow, #DAB965);
  --color-support: var(--color-misted);
  --color-accent: var(--wp--preset--color--aqua, #00E5F9);
  --color-text: var(--wp--preset--color--text, #22131A);
  --color-white: var(--wp--preset--color--white, #FFFFFF);

  /* Functional colors */
  --color-bg: #FFF9F6;
  --color-bg-soft: #FFF2EA;
  --color-border: rgba(34, 19, 26, 0.12);
  --color-shadow: rgba(20, 8, 12, 0.12);

  /* Typography */
  --font-heading: var(--wp--preset--font-family--heading, "BC Novatica", "Questrial", "Helvetica Neue", Arial, sans-serif);
  --font-body: var(--wp--preset--font-family--body, "Questrial", "Helvetica Neue", Arial, sans-serif);

  /* Layout */
  --container-width: 1200px;
  --container-wide: 1320px;
  --header-height: 64px;

  /* Motion */
  --transition-fast: 0.25s ease;
  --transition-smooth: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  /* Card presets */
  --card-primary-surface: var(--color-primary);
  --card-primary-contrast: #ffffff;
  --card-primary-muted: rgba(255, 255, 255, 0.85);
  --card-primary-border: transparent;
  --card-primary-badge-surface: rgba(255, 255, 255, 0.18);
  --card-primary-badge-contrast: #ffffff;
  --card-primary-shadow: 0 16px 32px rgba(20, 8, 12, 0.2);
  --card-primary-icon-surface: rgba(255, 255, 255, 0.2);

  --card-saffron-surface: var(--color-secondary);
  --card-saffron-contrast: #3a0f23;
  --card-saffron-muted: rgba(58, 15, 35, 0.72);
  --card-saffron-border: rgba(58, 15, 35, 0.18);
  --card-saffron-badge-surface: rgba(58, 15, 35, 0.08);
  --card-saffron-badge-contrast: #3a0f23;

  --card-aqua-surface: var(--color-accent);
  --card-aqua-contrast: #052028;
  --card-aqua-muted: rgba(5, 32, 40, 0.7);
  --card-aqua-border: rgba(5, 32, 40, 0.12);
  --card-aqua-badge-surface: rgba(5, 32, 40, 0.1);
  --card-aqua-badge-contrast: #052028;

  --card-misted-surface: var(--color-misted);
  --card-misted-contrast: #3a0f23;
  --card-misted-muted: rgba(58, 15, 35, 0.72);
  --card-misted-border: rgba(58, 15, 35, 0.18);
  --card-misted-badge-surface: rgba(58, 15, 35, 0.08);
  --card-misted-badge-contrast: #3a0f23;

  --card-dark-surface: #1b0f16;
  --card-dark-contrast: #ffffff;
  --card-dark-muted: rgba(255, 255, 255, 0.7);
  --card-dark-border: rgba(255, 255, 255, 0.12);
  --card-dark-badge-surface: rgba(255, 255, 255, 0.16);
  --card-dark-badge-contrast: #ffffff;

  --card-white-surface: #ffffff;
  --card-white-contrast: var(--color-text);
  --card-white-muted: rgba(34, 19, 26, 0.6);
  --card-white-border: rgba(34, 19, 26, 0.12);
  --card-white-badge-surface: rgba(34, 19, 26, 0.08);
  --card-white-badge-contrast: var(--color-text);
}