/**
 * TUQANO — Design Tokens
 * C23-inspired: one accent color (forest green) on warm ivory canvas
 */
:root {
  /* ── Canvas ──────────────────────────────────────────────────── */
  --color-bg:           #FAF7F2;   /* warm ivory — main canvas */
  --color-bg-alt:       #F3EDE3;   /* subtle section depth */
  --color-bg-deep:      #EBE2D4;   /* deeper warm for select sections */

  /* ── Brand palette ───────────────────────────────────────────── */
  --color-green:        #213A2E;   /* forest green — primary text & accent */
  --color-gold:         #C8A96E;   /* warm gold */
  --color-gold-light:   #EFD48D;
  --color-text:         #213A2E;   /* green IS the text color (like C23's indigo) */
  --color-text-muted:   rgba(33,58,46,0.52);
  --color-text-faint:   rgba(33,58,46,0.22);
  --color-cream:        #FAF7F2;   /* alias for templates */

  /* ── Variety accent colors ───────────────────────────────────── */
  --color-acai:         #7B3F6E;
  --color-cupuacu:      #9A7050;
  --color-mango:        #C89030;
  --color-ananas:       #E8C96A;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-serif:   'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Type scale ──────────────────────────────────────────────── */
  --text-xs:      0.6875rem;   /* 11px */
  --text-sm:      0.8125rem;   /* 13px */
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.375rem;
  --text-2xl:     1.75rem;
  --text-3xl:     2.25rem;
  --text-4xl:     3rem;
  --text-5xl:     4rem;
  --text-6xl:     5.5rem;
  --text-hero:    clamp(5.5rem, 14vw, 13rem);   /* massive C23-style display */
  --text-display: clamp(2.75rem, 6vw, 5.5rem);  /* product name size */

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ──────────────────────────────────────────────────── */
  --max-width:       1280px;
  --max-width-text:  660px;
  --header-height:   72px;
  --header-total:    152px;   /* announce bar + logo row + nav row */
  --radius-sm:       2px;
  --radius:          4px;
  --radius-lg:       8px;

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-luxury:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s var(--ease-luxury);
  --transition-slow: 0.7s var(--ease-luxury);
  --dur-fast:        200ms;
  --dur-base:        400ms;
  --dur-slow:        700ms;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm:     0 2px 8px rgba(33,58,46,0.07);
  --shadow:        0 4px 24px rgba(33,58,46,0.10);
  --shadow-bottle: 0 40px 80px rgba(33,58,46,0.14), 0 8px 20px rgba(33,58,46,0.08);
  --shadow-gold:   0 4px 24px rgba(200,169,110,0.25);
}

@media (max-width: 768px) {
  :root {
    --text-hero:    clamp(4rem, 18vw, 6rem);
    --text-display: clamp(2rem, 8vw, 3rem);
    --header-height: 60px;
    --header-total: 108px;
  }
}