/* Bevnique visual-token inventory — exact palette from CLAUDE.md, mapped to semantic roles.
   Do not introduce new colors/fonts here; this file is the single source of truth for both. */
:root {
  /* Raw Bevnique palette */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-taupe: #9e8e86;
  --color-cream: #f2ede7;
  --color-ivory: #f8f5f0;
  --color-pale: #ece9e9;
  --color-beige: #d3c6c0;
  --color-olive: #5e5544;
  --color-blush: #e4c5bf;

  /* Semantic roles */
  --bg-page: var(--color-ivory);
  --bg-section-alt: var(--color-cream);
  --bg-dark: var(--color-black);
  --text-on-dark: var(--color-white);
  --text-primary: var(--color-black);
  --text-muted: var(--color-olive);
  --accent-primary: var(--color-taupe);
  --accent-primary-contrast: var(--color-white);
  --accent-soft: var(--color-blush);
  --accent-secondary: var(--color-beige);
  --border-subtle: var(--color-pale);

  --font-body: Arial, Helvetica, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8rem;

  --max-width: 1200px;
  --max-width-narrow: 860px;
  --radius-sm: 2px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --transition-fast: 150ms ease;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 320ms var(--ease-premium);

  /* Shadow tones are the locked black at low opacity only — no new hues. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 32px -22px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.05), 0 28px 48px -24px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 30px 70px -40px rgba(0, 0, 0, 0.45);
}