/* ==========================================================================
   PIROLELÊ · Design Tokens
   Paleta extraída da logo (letras de bala 3D) + estética "confeitaria fina"
   da arte de referência (creme, filigrana dourada, granulado, suspiros).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Nunito:wght@400;600;700;800&family=Sniglet:wght@400;800&display=swap");

:root {
  /* ---------- Cores da logo (cada letra) ---------- */
  --rosa-50:  #fff1f6;
  --rosa-100: #fde0eb;
  --rosa-200: #fac4d9;
  --rosa-300: #f7a8c8;   /* "P" e "ê" */
  --rosa-500: #e87ea4;   /* etiqueta de preço */
  --rosa-700: #c4567f;

  --azul-50:  #eef8fe;
  --azul-100: #d9effc;
  --azul-300: #8ecdf2;   /* "i" e "l" */
  --azul-500: #5aaedf;
  --azul-700: #2f7fb3;

  --verde-50:  #effbee;
  --verde-100: #daf4d7;
  --verde-300: #a6e3a1;  /* "r" e "l" */
  --verde-500: #72c47b;
  --verde-700: #3f8d4c;

  --amarelo-50:  #fffbe6;
  --amarelo-100: #fff3bf;
  --amarelo-300: #ffe170; /* "o" e contorno da nuvem */
  --amarelo-500: #f5c842;
  --amarelo-700: #b98d12;

  --lilas-50:  #f6f0fe;
  --lilas-100: #ebdffb;
  --lilas-300: #c9a6ee;  /* "e" */
  --lilas-500: #a67fdb;
  --lilas-700: #7651ad;

  /* ---------- Neutros "confeitaria" (referência) ---------- */
  --creme-0:   #fffdf9;
  --creme-50:  #fff8f0;   /* fundo principal */
  --creme-100: #fcf0e3;
  --creme-200: #f5e3cf;
  --creme-300: #ead2b8;

  --ouro-200: #f1dfb4;
  --ouro-300: #e3c88a;
  --ouro-400: #cfa961;    /* filigrana */
  --ouro-500: #b8904a;
  --ouro-700: #8a6a30;

  --oliva-900: #3f3d1e;   /* títulos (como "SUSPIRO") */
  --oliva-700: #5a5730;
  --cacau-700: #5e4a43;   /* texto corrido */
  --cacau-500: #8a7269;
  --cacau-300: #b9a59c;

  /* ---------- Semânticos ---------- */
  --bg:            var(--creme-50);
  --surface:       var(--creme-0);
  --surface-sunk:  var(--creme-100);
  --ink-title:     var(--oliva-900);
  --ink:           var(--cacau-700);
  --ink-soft:      var(--cacau-500);
  --accent:        var(--rosa-500);
  --accent-soft:   var(--rosa-100);
  --line-gold:     var(--ouro-400);
  --stitch:        var(--rosa-300);

  --gold-foil: linear-gradient(135deg, #f6e6bd 0%, #d4ae66 28%, #f3dfa6 48%, #b88f45 72%, #e9cf91 100%);
  --candy-rainbow: linear-gradient(90deg, var(--rosa-300), var(--amarelo-300), var(--verde-300), var(--azul-300), var(--lilas-300));

  /* ---------- Tipografia ---------- */
  --font-display: "Cormorant SC", "Cormorant Garamond", Georgia, serif;   /* títulos versalete */
  --font-serif:   "Cormorant Garamond", Georgia, serif;                   /* subtítulos, citações */
  --font-candy:   "Sniglet", "Nunito", system-ui, sans-serif;            /* toques "bala" */
  --font-body:    "Nunito", system-ui, sans-serif;                        /* texto e UI */

  --fs-hero: clamp(2.6rem, 8vw, 6.5rem);
  --fs-h1:   clamp(2.4rem, 5vw, 3.8rem);
  --fs-h2:   clamp(1.9rem, 3.6vw, 2.6rem);
  --fs-h3:   1.6rem;
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-sm:   .875rem;
  --fs-xs:   .75rem;

  --tracking-display: .32em;
  --tracking-caps:    .18em;

  /* ---------- Espaço / raio ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---------- Sombras (quentes, nunca cinza) ---------- */
  --shadow-paper: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(150,105,60,.06), 0 12px 32px -12px rgba(150,105,60,.22);
  --shadow-float: 0 2px 6px rgba(150,105,60,.08), 0 24px 48px -18px rgba(150,105,60,.32);
  --shadow-candy: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -4px 0 rgba(0,0,0,.08), 0 6px 14px -6px rgba(196,86,127,.55);

  /* ---------- Movimento ---------- */
  --ease-soft:   cubic-bezier(.22,.8,.25,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  /* ---------- Texturas ---------- */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --tex-sprinkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg opacity='.75'%3E%3Crect x='22' y='30' width='12' height='4.5' rx='2.25' fill='%23f7a8c8' transform='rotate(-32 28 32)'/%3E%3Crect x='140' y='18' width='12' height='4.5' rx='2.25' fill='%238ecdf2' transform='rotate(24 146 20)'/%3E%3Crect x='212' y='92' width='12' height='4.5' rx='2.25' fill='%23ffe170' transform='rotate(-60 218 94)'/%3E%3Crect x='70' y='150' width='12' height='4.5' rx='2.25' fill='%23a6e3a1' transform='rotate(40 76 152)'/%3E%3Crect x='180' y='210' width='12' height='4.5' rx='2.25' fill='%23c9a6ee' transform='rotate(-12 186 212)'/%3E%3Crect x='18' y='226' width='12' height='4.5' rx='2.25' fill='%238ecdf2' transform='rotate(70 24 228)'/%3E%3Ccircle cx='96' cy='66' r='2.6' fill='%23ffe170'/%3E%3Ccircle cx='238' cy='36' r='2.2' fill='%23f7a8c8'/%3E%3Ccircle cx='124' cy='230' r='2.6' fill='%23a6e3a1'/%3E%3Ccircle cx='40' cy='110' r='2' fill='%23c9a6ee'/%3E%3Ccircle cx='226' cy='160' r='2.4' fill='%238ecdf2'/%3E%3Ccircle cx='150' cy='120' r='1.8' fill='%23f7a8c8'/%3E%3Cpath d='M190 60c-2.4-2.6-6.4-.6-4.6 2.6l4.6 4.4 4.6-4.4c1.8-3.2-2.2-5.2-4.6-2.6z' fill='%23f7a8c8'/%3E%3Cpath d='M58 196c-2-2.2-5.4-.5-3.9 2.2l3.9 3.7 3.9-3.7c1.5-2.7-1.9-4.4-3.9-2.2z' fill='%23ffe170'/%3E%3C/g%3E%3C/svg%3E");
}