/* ============================================================
   rollshaper.md — Design Tokens
   Direction: "Rounded Wow / Boutique" — warm plum + coral +
   cream palette, big rounded forms, circular product staging,
   bento composition. Bricolage Grotesque display + Inter body.
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --c-cream:   #f7ece4;   /* warm porcelain ground */
  --c-cream-2: #fdf6ef;   /* cards / raised */
  --c-cream-3: #efe2d6;   /* soft alt / borders */
  --c-white:   #ffffff;

  /* --- Rich plum (dark blocks) --- */
  --c-plum:    #48213e;
  --c-plum-2:  #371930;
  --c-plum-3:  #5a2c4e;

  /* --- Accents --- */
  --c-coral:      #ff6a45;   /* primary accent */
  --c-coral-deep: #eb5330;
  --c-coral-soft: rgba(255, 106, 69, 0.14);
  --c-butter:     #ffcf8f;   /* warm highlight */
  --c-butter-soft: rgba(255, 207, 143, 0.22);

  /* --- Text --- */
  --c-ink:   #2b1723;   /* headings on cream */
  --c-body:  #63535c;   /* body on cream */
  --c-muted: #8d7c85;   /* captions */
  --c-on-plum:       #f7ece4;
  --c-on-plum-muted: #cbaabb;
  --c-on-coral:      #3a1108;

  /* --- Lines --- */
  --c-line:   rgba(43, 23, 35, 0.10);
  --c-line-2: rgba(43, 23, 35, 0.16);
  --c-line-plum: rgba(247, 236, 228, 0.14);

  /* --- Status --- */
  --c-success:    #2f9e6b;
  --c-success-bg: rgba(47, 158, 107, 0.12);
  --c-error:      #d9482c;
  --c-error-bg:   rgba(217, 72, 44, 0.10);

  /* --- Atmosphere --- */
  --grad-coral:  linear-gradient(180deg, #ff7d52 0%, #f4623b 100%);
  --grad-plum:   linear-gradient(150deg, #5a2c4e 0%, #48213e 55%, #371930 100%);
  --spot-coral:  radial-gradient(closest-side, rgba(255,106,69,0.55), rgba(255,106,69,0) 70%);
  --spot-butter: radial-gradient(closest-side, rgba(255,207,143,0.6), rgba(255,207,143,0) 70%);

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --text-xl:   clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.45rem, 1.2rem + 1vw, 2rem);
  --text-3xl:  clamp(1.8rem, 1.4rem + 1.6vw, 2.7rem);
  --text-hero: clamp(2.2rem, 1.6rem + 2.6vw, 3.9rem);

  --lh-tight: 1.05;
  --lh-snug:  1.15;
  --lh-body:  1.62;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  --ls-tight: -0.02em;
  --ls-wide:  0.14em;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 2.8rem + 5vw, 7rem);
  --container: 1220px;
  --container-narrow: 880px;

  /* --- Radius (big & round) --- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 30px;
  --r-xl: 44px;
  --r-2xl: 60px;
  --r-pill: 999px;

  /* --- Shadows (soft, warm) --- */
  --shadow-sm: 0 4px 16px rgba(72,33,62,0.08);
  --shadow-md: 0 20px 50px rgba(72,33,62,0.14);
  --shadow-lg: 0 40px 90px rgba(72,33,62,0.22);
  --shadow-coral: 0 18px 40px rgba(255,106,69,0.34);
  --shadow-product: 0 40px 70px rgba(55,25,48,0.4);

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 640ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.5, 0.5, 1);

  --header-h: 76px;
}