/* D'VOLA — web design tokens v1.0 (2026) */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  /* Primary — from the logo */
  --dv-plum: #594754;          /* Brand Plum · logo, primary text, buttons */
  --dv-plum-deep: #3E2F3A;     /* Deep Plum · body text, footer */
  --dv-blush: #F2D0E6;         /* Blush · signature ground */
  --dv-sage: #516153;          /* Cherry-leaf Sage · accents, links on light */
  /* Secondary — flavour tones */
  --dv-mauve: #806A7A;         /* Mauve · secondary text, labels */
  --dv-blush-soft: #FAEFF6;    /* Blush Mist · section fills, reversed logo */
  --dv-sage-light: #8FA487;    /* Light Sage · leaf on plum, Fit & Fuel tag */
  --dv-couverture: #4A3026;    /* Couverture · chocolate-specific promos */
  --dv-pistachio: #B8C68E;     /* Pistachio · Dubai / kunafa promos */
  /* Accent */
  --dv-gold: #C8A45C;          /* Leaf Gold · keylines, flecks — never body text on light */
  /* Neutrals */
  --dv-offwhite: #FFFDFA;      /* Page background */
  --dv-cream: #F7F5F2;         /* Menu paper */
  --dv-line: rgba(89, 71, 84, 0.18);

  --dv-font-display: 'Marcellus', 'Times New Roman', serif;
  --dv-font-body: 'Quicksand', 'Helvetica Neue', sans-serif;

  /* Type scale (1.25 major third, 18px base) */
  --dv-fs-display: clamp(2.75rem, 6vw, 4.5rem); /* 72 */
  --dv-fs-h1: clamp(2.25rem, 4.5vw, 3.5rem);   /* 56 */
  --dv-fs-h2: 2.25rem;                          /* 36 */
  --dv-fs-h3: 1.5rem;                           /* 24 */
  --dv-fs-body: 1.125rem;                       /* 18 */
  --dv-fs-small: 0.9375rem;                     /* 15 */
  --dv-fs-eyebrow: 0.75rem;                     /* 12, uppercase, +0.24em */

  --dv-space-1: 4px; --dv-space-2: 8px; --dv-space-3: 16px; --dv-space-4: 24px;
  --dv-space-5: 40px; --dv-space-6: 64px; --dv-space-7: 104px;
  --dv-radius-sm: 4px; --dv-radius-md: 12px; --dv-radius-pill: 999px;
  --dv-shadow-card: 0 14px 40px rgba(62, 47, 58, 0.12);
  --dv-max-width: 1240px;
}

body { margin: 0; background: var(--dv-offwhite); color: var(--dv-plum-deep); font: 500 var(--dv-fs-body)/1.65 var(--dv-font-body); }
h1, h2, h3 { font-family: var(--dv-font-display); font-weight: 400; color: var(--dv-plum); line-height: 1.12; }
a { color: var(--dv-sage); text-underline-offset: 3px; }
a:hover { color: var(--dv-plum); }

.dv-eyebrow { font: 600 var(--dv-fs-eyebrow)/1 var(--dv-font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--dv-mauve); }
.dv-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--dv-radius-pill); font: 600 15px/1 var(--dv-font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--dv-plum); }
.dv-btn--primary { background: var(--dv-plum); color: var(--dv-blush-soft); }
.dv-btn--primary:hover { background: var(--dv-plum-deep); border-color: var(--dv-plum-deep); }
.dv-btn--secondary { background: transparent; color: var(--dv-plum); }
.dv-btn--secondary:hover { background: var(--dv-blush); }
.dv-btn:focus-visible { outline: 2px solid var(--dv-gold); outline-offset: 3px; }
.dv-tag { display: inline-block; padding: 5px 12px; border-radius: var(--dv-radius-pill); font: 600 12px/1 var(--dv-font-body); letter-spacing: .1em; text-transform: uppercase; background: var(--dv-blush); color: var(--dv-plum); }
.dv-tag--fit { background: #E4EADF; color: var(--dv-sage); }
.dv-card { background: #fff; border-radius: var(--dv-radius-md); box-shadow: var(--dv-shadow-card); overflow: hidden; }