/* =============================================================================
   Choyens marketing site — Theme tokens
   =============================================================================
   FLUID by default — every spacing + type token uses clamp() so the layout
   scales smoothly from 320px (iPhone SE 1st gen) through 1440px+ ultrawide
   without breakpoint stepping. To re-skin, edit one block in :root.
   ===========================================================================*/

:root {
  /* ─── Espresso × Sand (default) ─── */
  --primary:        #4e221c;
  --primary-dark:   #3a160f;
  --primary-light:  #6b3428;
  --primary-faint:  #fdf6ee;
  --primary-grad-tail: #2a120e;

  --accent:         #f2ce98;
  --accent-dark:    #c49a6c;
  --accent-light:   #f7ddb3;

  --text:           #4e221c;
  --text-secondary: #7a706a;
  --text-muted:     #9a9088;
  --text-on-dark:   rgba(253, 245, 234, 0.84);
  --text-on-dark-muted: rgba(253, 245, 234, 0.55);
  --text-white:     #ffffff;

  --bg-primary:     #ffffff;
  --bg-secondary:   #faf6f0;
  --bg-card:        #ffffff;
  --bg-soft:        #f7f0e6;
  --bg-dark:        #4e221c;

  --border:         #ede8e0;
  --border-light:   #f2ebe0;
  --border-medium:  #d8d0c8;

  /* ─── Fluid spacing — clamp(min, vw-based, max) ─────────────────────── */
  --sp-xs:  clamp(3px,   0.4vw,  4px);
  --sp-sm:  clamp(6px,   0.7vw,  8px);
  --sp-md:  clamp(12px,  1.4vw,  16px);
  --sp-lg:  clamp(16px,  2vw,    24px);
  --sp-xl:  clamp(20px,  2.6vw,  32px);
  --sp-2xl: clamp(32px,  4vw,    48px);
  --sp-3xl: clamp(40px,  5.5vw,  72px);
  --sp-4xl: clamp(56px,  8vw,    96px);

  /* ─── Fluid typography — body uses clamp too so reading scales ─────── */
  --fs-xs:   clamp(11px, 0.78vw, 12px);
  --fs-sm:   clamp(13px, 0.95vw, 14px);
  --fs-md:   clamp(14px, 1.05vw, 16px);
  --fs-lg:   clamp(16px, 1.25vw, 18px);
  --fs-xl:   clamp(18px, 1.55vw, 22px);
  --fs-2xl:  clamp(22px, 2.1vw,  28px);
  --fs-3xl:  clamp(26px, 2.8vw,  36px);
  --fs-4xl:  clamp(30px, 3.7vw,  48px);
  --fs-5xl:  clamp(38px, 5vw,    64px);
  --fs-6xl:  clamp(48px, 8vw,    84px);

  /* ─── Radius scale ─── */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-round: 999px;

  /* ─── Shadows ─── */
  --shadow-sm:   0 1px 3px rgba(78, 34, 28, 0.06);
  --shadow-card: 0 1px 2px rgba(78, 34, 28, 0.04),
                 0 8px 24px rgba(78, 34, 28, 0.06);
  --shadow-lift: 0 6px 18px rgba(78, 34, 28, 0.10),
                 0 18px 48px rgba(78, 34, 28, 0.08);
  --shadow-hero: 0 14px 40px rgba(78, 34, 28, 0.18),
                 0 4px 12px rgba(78, 34, 28, 0.10);

  /* ─── Layout caps ─── */
  --content-max:    1200px;
  --content-narrow: 920px;

  --font-stack: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reduced-motion users get instant, no-animation experience. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}