:root {
  /* primitives */
  --p-color-coral: #f43f5e;
  --p-color-teal: #14b8a6;
  --p-color-navy: #172554;
  --p-color-yellow: #fde047;
  --p-color-lavender: #ede9fe;
  --p-color-cream: #fffaf0;
  --p-color-cream2: #ffffff;
  --p-color-muted: #64748b;
  --p-color-border: #e9d5ff;
  --p-color-white: #ffffff;
  --p-spacing-0: 0px;
  --p-spacing-1: 0.25rem;
  --p-spacing-2: 0.5rem;
  --p-spacing-3: 0.75rem;
  --p-spacing-4: 1rem;
  --p-spacing-6: 1.5rem;
  --p-spacing-8: 2rem;
  --p-spacing-10: 2.5rem;
  --p-spacing-12: 3rem;
  --p-spacing-16: 4rem;
  --p-spacing-20: 5rem;
  --p-spacing-24: 6rem;
  --p-spacing-28: 7rem;
  --p-radius-sm: 0.5rem;
  --p-radius-md: 0.875rem;
  --p-radius-lg: 1.25rem;
  --p-radius-xl: 1.5rem;
  --p-radius-2xl: 1.75rem;
  --p-radius-full: 9999px;
  --p-font-family-display: Nunito, Arial Rounded MT Bold, system-ui, sans-serif;
  --p-font-family-body: Nunito, system-ui, sans-serif;
  --p-font-size-xs: 0.75rem;
  --p-font-size-sm: 0.875rem;
  --p-font-size-base: 1rem;
  --p-font-size-lg: 1.125rem;
  --p-font-size-xl: 1.25rem;
  --p-font-size-2xl: 1.5rem;
  --p-font-size-4xl: 2.25rem;
  --p-font-size-5xl: 3rem;
  --p-font-weight-light: 300;
  --p-font-weight-normal: 400;
  --p-font-weight-medium: 500;
  --p-font-weight-semibold: 700;
  --p-font-weight-bold: 800;
  --p-shadow-cta: 0 4px 16px rgb(244 63 94 / 0.32);
  --p-shadow-cta-hover: 0 8px 24px rgb(244 63 94 / 0.44);
  --p-shadow-card: 0 10px 25px rgb(23 37 84 / 0.1);
  --p-shadow-card-hover: 0 25px 50px rgb(23 37 84 / 0.18);

  /* global tokens */
  --t-surface-primary: var(--p-color-cream);
  --t-surface-secondary: var(--p-color-cream2);
  --t-surface-inverse: var(--p-color-navy);
  --t-text-primary: var(--p-color-navy);
  --t-text-secondary: var(--p-color-muted);
  --t-text-on-primary: var(--p-color-white);
  --t-text-on-inverse: var(--p-color-cream);
  --t-accent: var(--p-color-coral);
  --t-accent-hover: var(--p-color-coral);
  --t-success: var(--p-color-teal);
  --t-highlight: var(--p-color-yellow);
  --t-panel-hover: var(--p-color-lavender);
  --t-border-default: var(--p-color-border);
  --t-radius-interactive: var(--p-radius-full);
  --t-font-body: var(--p-font-family-body);
  --t-font-display: var(--p-font-family-display);
  --t-spacing-section: var(--p-spacing-20);
}

[data-section="hero"] {
  --s-hero-bg: var(--t-surface-primary);
  --s-hero-text: var(--t-text-primary);
  --s-hero-padding: var(--p-spacing-20);
}

[data-section="footer"] {
  --s-footer-bg: var(--t-surface-inverse);
  --s-footer-text: var(--t-text-on-inverse);
}

[data-section="guarantee"] {
  --s-guarantee-bg: var(--t-surface-inverse);
  --s-guarantee-text: var(--t-text-on-inverse);
}

[data-component="button"] {
  --c-button-bg: var(--t-accent);
  --c-button-bg-hover: var(--t-accent-hover);
  --c-button-text: var(--t-text-on-primary);
  --c-button-radius: var(--t-radius-interactive);
  --c-button-padding-x: var(--p-spacing-8);
  --c-button-padding-y: var(--p-spacing-3);
  --c-button-shadow: var(--p-shadow-cta);
  --c-button-shadow-hover: var(--p-shadow-cta-hover);
}

[data-component="card"] {
  --c-card-bg: var(--t-surface-secondary);
  --c-card-border: var(--t-border-default);
  --c-card-radius: var(--p-radius-2xl);
  --c-card-shadow: var(--p-shadow-card);
}

[data-component="nav"] {
  --c-nav-bg: var(--t-surface-primary);
  --c-nav-text: var(--t-text-primary);
  --c-nav-height: 5rem;
}

[data-component="badge"] {
  --c-badge-safety-border: var(--t-success);
  --c-badge-safety-text: var(--t-success);
  --c-badge-age-border: var(--t-highlight);
  --c-badge-age-bg: var(--t-highlight);
  --c-badge-age-text: var(--t-text-primary);
}