/* =========================================================================
   Pet Estrela — Design Tokens
   Paleta preservada do site atual + conceito "estrela / céu noturno".
   Camadas: primitivos (--c-*) -> semânticos (--color-*).
   ========================================================================= */

:root {
  /* ---- Primitivos de cor (paleta a preservar) ---- */
  --c-bg:          #FBFBFB;
  --c-ink:         #272727;
  --c-ink-soft:    #4a4a4a;
  --c-petrol:      #023344;
  --c-petrol-700:  #043f54;
  --c-petrol-600:  #0a4f66;
  --c-petrol-hover:#25485F;
  --c-pastel-1:    #A7CEDF;
  --c-pastel-2:    #C4DEE8;
  --c-pastel-3:    #D0F3FF;
  --c-gold-1:      #E9B04F;
  --c-gold-2:      #FFBC7D;
  --c-gold-3:      #FFCF7E;
  --c-gray-1:      #F1F1F1;
  --c-gray-2:      #A8A8A8;
  --c-white:       #FFFFFF;

  /* mistura para fundos sutis */
  --c-mist:        #F4F8FA;   /* azul quase imperceptível */
  --c-sand:        #FBF4E9;   /* dourado lavado, quente */

  /* ---- Semânticos ---- */
  --color-surface:      var(--c-bg);
  --color-surface-alt:  var(--c-mist);
  --color-surface-warm: var(--c-sand);
  --color-card:         var(--c-white);
  --color-text:         var(--c-ink);
  --color-text-soft:    var(--c-ink-soft);
  --color-muted:        var(--c-gray-2);
  --color-accent:       var(--c-petrol);
  --color-accent-hover: var(--c-petrol-hover);
  --color-on-accent:    var(--c-white);
  --color-gold:         var(--c-gold-1);
  --color-divider:      #E9EEF1;
  --color-whatsapp:     #25D366;
  --color-whatsapp-700: #1da851;

  /* gradiente de céu noturno (hero / footer) */
  --grad-night: radial-gradient(120% 140% at 80% -10%, #0a4f66 0%, #023344 45%, #021f2b 100%);
  --grad-dawn:  linear-gradient(180deg, #FBF4E9 0%, #FBFBFB 100%);

  /* ---- Tipografia ---- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Just Another Hand", "Inter", cursive;

  /* escala fluida (~major third) */
  --fs-200: clamp(.78rem, .76rem + .1vw, .82rem);
  --fs-300: clamp(.875rem, .85rem + .12vw, .94rem);
  --fs-400: clamp(1rem, .97rem + .18vw, 1.06rem);
  --fs-500: clamp(1.18rem, 1.08rem + .45vw, 1.42rem);
  --fs-600: clamp(1.5rem, 1.3rem + .9vw, 2.05rem);
  --fs-700: clamp(1.95rem, 1.55rem + 1.8vw, 2.95rem);
  --fs-800: clamp(2.4rem, 1.8rem + 3vw, 4rem);
  --fs-hand: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-base:  1.65;

  --tracking-wide: .14em;

  /* ---- Espaçamento (escala 4px) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- Raios ---- */
  --radius-pill: 100px;
  --radius-card: 20px;
  --radius-sm:   12px;
  --radius-xl:   32px;

  /* ---- Sombras suaves (tom petróleo) ---- */
  --shadow-xs: 0 1px 3px rgba(2, 51, 68, .06);
  --shadow-sm: 0 4px 16px rgba(2, 51, 68, .07);
  --shadow-md: 0 14px 40px rgba(2, 51, 68, .10);
  --shadow-lg: 0 30px 70px rgba(2, 51, 68, .16);
  --shadow-gold: 0 10px 30px rgba(233, 176, 79, .28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .5s;
  --dur-fast: .25s;

  /* ---- Layout ---- */
  --container: 1160px;
  --container-narrow: 760px;
  --header-h: 76px;
}