/* SugarCalle design tokens  -  derived from logo + AWGE-edge brief.
   ONE token system. All component styles must reference these. */

:root {
  /* Brand palette (from logo) */
  --pink:        #E91E8E;       /* hot brand pink */
  --pink-soft:   #F4B6D8;       /* lavender-pink ring */
  --teal:        #5DCED4;       /* spatula teal */
  --teal-deep:   #1B4D5E;       /* spatula handle / ink contrast */
  --cream:       #F8E5A0;       /* yellow drip / accent */
  --cream-bg:    #FFF6EE;       /* warm canvas */
  --black:       #0E0610;       /* deep ink for AWGE moments */
  --white:       #FFFFFF;

  /* Semantic */
  --bg:          var(--cream-bg);
  --bg-deep:     var(--black);
  --ink:         var(--teal-deep);
  --ink-soft:    #6A4458;
  --brand:       var(--pink);
  --brand-2:     var(--teal);
  --accent:      var(--cream);

  /* Type stack  -  distinctive, no Inter/Roboto/Arial */
  --font-display: "Bagel Fat One", "Bowlby One", "Caprasimo", system-ui, sans-serif;
  --font-edge:    "Caprasimo", "Bagel Fat One", Georgia, serif;
  --font-body:    "Manrope", "Be Vietnam Pro", -apple-system, system-ui, sans-serif;
  --font-mono:    "DM Mono", "SF Mono", "Menlo", monospace;

  /* Type scale */
  --t-mega: clamp(4rem, 18vw, 14rem);
  --t-xl:   clamp(2.5rem, 7vw, 5.5rem);
  --t-lg:   clamp(1.75rem, 4vw, 3rem);
  --t-md:   clamp(1.25rem, 2vw, 1.625rem);
  --t-base: 1.0625rem;
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.55;
  --leading-awge: 0.9;
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-eyebrow: 0.18em;

  /* Spacing rhythm */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* Radii */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 20px;
  --r-pill: 999px;

  /* Motion  -  ONE rhythm */
  --dur-fast:  150ms;
  --dur-mid:   320ms;
  --dur-slow:  640ms;
  --dur-epic: 1200ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1);

  /* Shadows */
  --sh-1: 0 2px 6px rgba(14, 6, 16, 0.06);
  --sh-2: 0 8px 30px rgba(14, 6, 16, 0.10);
  --sh-3: 0 24px 60px rgba(233, 30, 142, 0.18);
  --sh-pop: 0 0 0 4px rgba(233, 30, 142, 0.18), 0 12px 28px rgba(14, 6, 16, 0.18);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid:  0ms;
    --dur-slow: 0ms;
    --dur-epic: 0ms;
  }
}