/* ==========================================================================
   Casa dos Colchões — A Gigante Vermelhinha
   Design tokens · derivados do Guia de Identidade Visual v2
   ========================================================================== */

:root{
  /* --- Paleta de marca --- */
  --wine:        #8E0018;   /* dominante: hero, header, CTAs */
  --red-light:   #B01324;   /* início de gradiente, realce sobre vinho */
  --red-dark:    #650012;   /* hover, topbar, profundidade */
  --wine-deep:   #3A000A;   /* fim de gradiente, texto sobre bege, footer */
  --sand:        #F3E7CC;   /* fundo geral da página */
  --sand-dark:   #E1CFA4;   /* bordas e divisores */
  --cream:       #FBF7EC;   /* fundo de cards e blocos claros */
  --gold:        #B8862E;   /* acento pontual — nunca fundo grande */

  /* --- Papéis semânticos --- */
  --bg:              var(--sand);
  --surface:         var(--cream);
  --ink:             var(--wine-deep);          /* 14.4:1 sobre bege  */
  --ink-muted:       #5C3239;                   /*  ~8:1 sobre bege   */
  --ink-invert:      var(--cream);              /*  9.1:1 sobre vinho */
  --ink-invert-soft: rgba(251,247,236,.80);
  --border:          var(--sand-dark);
  --border-brand:    rgba(251,247,236,.22);

  /* --- Gradientes (os únicos permitidos) --- */
  --grad-brand: linear-gradient(135deg,#B01324 0%,#8E0018 48%,#3A000A 100%);
  --grad-veil:  linear-gradient(180deg,rgba(58,0,10,0) 0%,rgba(58,0,10,.32) 45%,rgba(58,0,10,.88) 100%);
  --grad-hero:  linear-gradient(90deg,rgba(142,0,24,.97) 0%,rgba(142,0,24,.96) 42%,rgba(142,0,24,.60) 60%,rgba(142,0,24,0) 76%);
  --grad-hero-m:linear-gradient(180deg,rgba(58,0,10,.56) 0%,rgba(142,0,24,.86) 46%,rgba(142,0,24,.93) 72%,rgba(58,0,10,.96) 100%);

  /* --- Tipografia --- */
  --font-display:"Playfair Display","Georgia","Times New Roman",serif;
  --font-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-eyebrow:clamp(.75rem,.70rem + .18vw,.8125rem);
  --fs-xs:  clamp(.8125rem,.78rem + .16vw,.875rem);
  --fs-sm:  clamp(.875rem,.84rem + .18vw,.9375rem);
  --fs-base:clamp(1rem,.96rem + .22vw,1.0625rem);
  --fs-lg:  clamp(1.0625rem,1rem + .34vw,1.1875rem);
  --fs-xl:  clamp(1.25rem,1.14rem + .55vw,1.5rem);
  --fs-h3:  clamp(1.375rem,1.20rem + .90vw,1.875rem);
  --fs-h2:  clamp(1.875rem,1.45rem + 2.0vw,3rem);
  --fs-h1:  clamp(2.25rem,1.60rem + 3.4vw,4.25rem);
  --fs-stat:clamp(2rem,1.50rem + 2.6vw,3.25rem);
  --fs-turn:clamp(1.5rem,1.15rem + 1.8vw,2.625rem);

  --lh-tight:1.06;  --lh-snug:1.24;  --lh-body:1.75;
  --ls-tight:-.015em; --ls-wide:.16em;

  /* --- Espaçamento --- */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:2.5rem; --sp-8:3rem;
  --sp-9:4rem;   --sp-10:5rem;  --sp-11:6.5rem;
  --section-y:clamp(3.5rem,2.2rem + 6.2vw,7rem);
  --gutter:clamp(1.25rem,.9rem + 1.6vw,2.5rem);

  /* --- Layout --- */
  --container:1200px;
  --container-wide:1360px;
  --container-text:42rem;
  --header-h:72px;

  /* --- Raios --- */
  --r-xs:2px; --r-sm:6px; --r-md:12px; --r-lg:20px; --r-full:999px;

  /* --- Sombras: sempre em vinho, nunca cinza --- */
  --shadow-sm:0 1px 2px rgba(58,0,10,.06),0 2px 6px rgba(58,0,10,.05);
  --shadow-md:0 4px 12px rgba(58,0,10,.09),0 12px 28px rgba(58,0,10,.07);
  --shadow-lg:0 10px 24px rgba(58,0,10,.13),0 28px 60px rgba(58,0,10,.11);
  --shadow-brand:0 8px 28px rgba(142,0,24,.28);

  /* --- Movimento --- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:140ms; --t-base:220ms; --t-slow:420ms; --t-reveal:680ms;

  /* --- Foco: um token por contexto de fundo --- */
  --focus-on-light:var(--wine-deep);
  --focus-on-dark: var(--sand);

  --z-header:100; --z-fab:150; --z-drawer:200; --z-skip:300;
}