/* Design Tokens — Color, spacing, shadow, typography */

:root {
  /* Brand Colors */
  --hp-red: #c1121f;
  --hp-red-bright: #e23b47;
  --hp-dark: #1d1312;

  /* Neutral Colors */
  --hp-ink: #171717;
  --hp-copy: #475467;
  --hp-muted: #667085;
  --hp-paper: #ffffff;
  --hp-bg: #edf2f7;
  --hp-shell: #f6f8fc;

  /* Borders & Lines */
  --hp-line: rgba(15, 23, 42, 0.08);

  /* Shadows */
  --hp-shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
  --hp-shadow-strong: 0 32px 90px rgba(15, 23, 42, 0.16);

  /* Typography */
  --hp-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;

  /* Spacing Scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
}