/* ============================================================
   DESIGN TOKENS — "Send some Love" card studio
   Premium · warm · alive.  Single source of truth for the look.
   ============================================================ */

:root {
  /* ---- Core palette (warm paper + romantic ink) ---- */
  --ink:        #2B2622;   /* warm near-black, primary text */
  --ink-soft:   #6B6259;   /* muted body / captions */
  --ink-faint:  #A89E92;   /* hints, placeholders */

  --paper:      #FBF7F0;   /* page background, warm ivory */
  --paper-2:    #F3ECE0;   /* deeper cream, sections */
  --surface:    #FFFFFF;   /* cards / panels */
  --line:       #E8DFD1;   /* hairline borders */

  /* ---- Accents ---- */
  --rose:       #D9637B;   /* primary — romance/love */
  --rose-deep:  #B84A63;
  --rose-soft:  #F6DBE1;
  --gold:       #C9A24B;   /* premium foil accent */
  --gold-soft:  #EFE0B6;

  /* ---- Occasion tints (used from Ticket 6 onward) ---- */
  --love:    #D9637B;
  --birthday:#E07A3E;
  --baby:    #9CC2E0;
  --thanks:  #8FA98C;
  --congrats:#C9A24B;
  --getwell: #A9C4B0;

  /* ---- Brand gradients ---- */
  --grad-hero:  radial-gradient(120% 120% at 15% 10%, #FDEFE3 0%, #FBF7F0 45%, #F4E7E9 100%);
  --grad-rose:  linear-gradient(135deg, #E8728C 0%, #D9637B 50%, #B84A63 100%);
  --grad-gold:  linear-gradient(135deg, #E6CF8A 0%, #C9A24B 55%, #A9863A 100%);

  /* ---- Romance mood palette (enrichment — drives the card-maker swatches) ---- */
  /* warm → cool, premium & harmonious (never neon). Ordered as shown in the picker. */
  --mood-rose:       #D9637B;   /* classic romance */
  --mood-ruby:       #B23A53;   /* deep, passionate red */
  --mood-blush:      #E7A6B4;   /* soft tender pink */
  --mood-peach:      #EEB196;   /* warm peach */
  --mood-sunset:     #E8845C;   /* warm coral glow */
  --mood-gold:       #C9A24B;   /* gilded, premium */
  --mood-berry:      #C9588E;   /* muted berry-magenta */
  --mood-plum:       #8E5072;   /* deep mauve plum */
  --mood-lavender:   #9E8BCB;   /* dreamy purple */
  --mood-cornflower: #8893D6;   /* soft blue-violet */
  --mood-sky:        #6FA8CE;   /* gentle sky blue */
  --mood-turquoise:  #4DA6A0;   /* calm turquoise */
  --mood-sage:       #8FA98C;   /* calm, get-well green */
  --mood-mint:       #9ED9BE;   /* fresh soft mint */
  --mood-slate:      #6E7A8A;   /* elegant cool neutral */

  /* ---- Foil / shimmer (gilded accents) ---- */
  --grad-foil: linear-gradient(110deg,
      #B98F2E 0%, #E6CF8A 18%, #FFF6D8 30%, #E6CF8A 42%,
      #C9A24B 55%, #FFF6D8 70%, #C9A24B 82%, #B98F2E 100%);
  --grad-romance: linear-gradient(135deg, #F7DCE3 0%, #FBEFE3 45%, #EFE0B6 100%);

  /* ---- Paper grain (subtle texture overlay) ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Typography ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand:    "Caveat", "Segoe Script", cursive;   /* handwritten card messages */

  --fs-hero:   clamp(2.6rem, 6vw, 5rem);
  --fs-h1:     clamp(2rem, 4.5vw, 3.4rem);
  --fs-h2:     clamp(1.5rem, 3vw, 2.2rem);
  --fs-lead:   clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:   1rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.75rem;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-8: 3rem;    --sp-10: 4rem;
  --sp-12: 6rem;   --sp-16: 8rem;

  /* ---- Radius ---- */
  --r-sm:  10px;
  --r:     18px;
  --r-lg:  28px;
  --r-xl:  40px;
  --r-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --sh-1: 0 1px 2px rgba(43,38,34,.06), 0 2px 8px rgba(43,38,34,.05);
  --sh-2: 0 4px 12px rgba(43,38,34,.08), 0 12px 32px rgba(43,38,34,.08);
  --sh-3: 0 10px 30px rgba(43,38,34,.12), 0 30px 70px rgba(184,74,99,.10);
  --sh-glow: 0 0 0 1px var(--gold-soft), 0 8px 30px rgba(201,162,75,.25);
  /* warm, romance-tinted depth (enrichment) */
  --sh-romance: 0 6px 18px rgba(184,74,99,.10), 0 22px 50px rgba(184,74,99,.14);
  --sh-4: 0 18px 44px rgba(43,38,34,.16), 0 44px 100px rgba(184,74,99,.16);
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--rose) 40%, transparent);

  /* ---- Motion ---- */
  --ease-soft:  cubic-bezier(.22,.61,.36,1);
  --ease-expo:  cubic-bezier(.16,1,.3,1);
  --ease-back:  cubic-bezier(.34,1.56,.64,1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --dur-slow: 1200ms;

  /* ---- Layout ---- */
  --maxw: 1140px;
  --maxw-narrow: 720px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-slow: 0ms; }
}