/* =========================================================================
   tokens.css — the dreamy cloudscape design system
   6 warm-pink dawn colors, soft rounded type, fluid scale.
   Every color is tinted warm — no pure #000 or #fff anywhere.
   ========================================================================= */

:root {
  /* --- Sky gradient stops (top → bottom of the dawn sky) --- */
  --sky-top: #E8E0FF;      /* soft lavender, top of sky        */
  --sky-mid: #FFD6E8;      /* blush pink, mid sky              */
  --sky-bottom: #FFE5D9;   /* warm peach, horizon              */

  /* --- Scene elements --- */
  --cloud: #FFF5F8;        /* warm cloud white (pink-tinted)   */
  --cloud-soft: #FFEFF4;   /* deeper cloud shadow              */
  --whale: #9DAAF2;        /* periwinkle, the creature         */
  --whale-belly: #C5CCF7;  /* lighter whale belly highlight    */

  /* --- Ink + accent --- */
  --ink: #3D2C4E;          /* plum-charcoal, all body text     */
  --ink-soft: #6B5A7E;     /* muted plum, secondary text       */
  --rose: #FF8FAB;         /* primary accent (CTAs, glow)      */
  --rose-deep: #E86F92;    /* hover state for rose             */

  /* --- Translucent surfaces --- */
  --panel: rgba(255, 245, 248, 0.72);   /* frosted cloud card   */
  --panel-border: rgba(255, 143, 171, 0.22);

  /* --- Type families (rounded, friendly, dreamy) --- */
  --font-display: 'Comfortaa', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;

  /* --- Fluid type scale --- */
  --step-hero: clamp(2.75rem, 6.5vw, 5.25rem);
  --step-h2: clamp(1.9rem, 3.6vw, 2.85rem);
  --step-h3: clamp(1.25rem, 2vw, 1.6rem);
  --step-body: 1.0625rem;
  --step-small: 0.875rem;
  --step-mono: 0.8125rem;

  /* --- Layout --- */
  --maxw: 1180px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --radius-pill: 999px;
  --radius-card: 22px;

  /* --- Motion --- */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);      /* primary ease-out    */
  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);      /* material standard   */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot / pop     */
  --ease-flow: cubic-bezier(0.65, 0, 0.35, 1);      /* in-out, cinematic    */
  --dur-fast: 0.18s;
  --dur: 0.4s;
  --dur-slow: 0.7s;
  --dur-cinema: 1s;

  /* --- Spacing scale (macro-whitespace friendly) --- */
  --space-section: clamp(4rem, 10vw, 8rem);
}