/* HairProof / The Beauty Obsession: implementation reference tokens.
   This file is intentionally scoped to variables; integrate into existing CSS carefully. */
:root {
  --hp-midnight-plum: #26131f;
  --hp-heritage-burgundy: #51152f;
  --hp-berry-ink: #772d4b;
  --hp-soft-champagne: #d9b793;
  --hp-warm-cream: #efe2d6;
  --hp-porcelain: #fffaf4;

  --hp-background: var(--hp-porcelain);
  --hp-surface: var(--hp-warm-cream);
  --hp-text: var(--hp-midnight-plum);
  --hp-primary: var(--hp-heritage-burgundy);
  --hp-primary-hover: var(--hp-berry-ink);
  --hp-on-dark: var(--hp-porcelain);
  --hp-rule: rgba(38, 19, 31, .18);

  --hp-display-font: Georgia, 'Times New Roman', serif;
  --hp-body-font: Arial, Helvetica, sans-serif;
  --hp-container: 1320px;
  --hp-radius-small: 8px;
  --hp-radius-medium: 18px;
  --hp-motion-quick: 180ms;
}
/* Accessibility baseline. Scope actual rules to your app selectors. */
@media (prefers-reduced-motion: reduce) {
  :root { --hp-motion-quick: 0ms; }
}