/**
 * Vailo — design token overrides.
 *
 * Parent defaults load first from veylo-base/assets/tokens.css.
 * Redefine primitives here; derived tokens (color-mix shadows, overlays,
 * reward surfaces, banners) follow automatically.
 */

:root {
  --layout-max: 1360px;

  /* Primary — bright rose pink */
  --color-primary: #e7769c;
  --color-primary-dark: #c94d78;

  /* Secondary — dusty rose in the same hue family */
  --color-secondary: #d39db0;
  --color-highlight: #eab8ca;
  --color-highlight-muted: #f1dae2;

  /* Accent — deeper saturated rose for fills and emphasis */
  --color-accent: #dc628c;
  --color-accent-fill: #c5396a;

  /* Surfaces — pale blush, pearl white, and pure white */
  --color-background-muted: #faf0f4;
  --color-background: #ffffff;
  --color-surface: #ffffff;

  /* Text — deep berry body with muted mauve secondary text */
  --color-text: #4e3340;
  --color-text-secondary: #8a6a76;
  --color-text-muted: var(--color-text-secondary);

  --color-border: #f0d0da;

  /* Soft mint complementary to rose pink (hero accents, etc.). */
  --color-mint: #b8e0d0;

  --color-primary-hover: var(--color-primary-dark);
  --color-accent-hover: #c5396a;

  /* Solid banner: warm near-black in the berry family, white text. */
  --banner-gradient: #1a1216;
  --banner-text: #ffffff;

  /* Match Sephora persistent-banner min-heights (grows when copy wraps). */
  --banner-height: 48px;
  --banner-height-mobile: 40px;

  /* Navbar bar height. Brand/nav padding-block: 16px mobile / 28px desktop.
     Action buttons: 36×48 pad 4×10 (mobile) / 52×62 pad 12×17 (desktop), icons 28. */
  --header-height: 80px;
  --header-height-mobile: 54px;
}