/* =====================================================================
   CASA TRANQUILINO — Design Tokens
   "Baunilha & mel" · quente, clara, romântica, contida.
   Fonte única da verdade: cores, tipografia, espaço, traços e texturas.
   Toda regra aqui nasce do Manual de Marca e da Filosofia "Mesa de Casa".
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     COR — hierarquia de afeto
     O baunilha domina · o cacau ancora · o mel é fio dourado raro.
     Regra: texto sempre em cacau sobre baunilha/creme.
     Mel e âmbar só em detalhes e CTAs. Rosa canela nunca dominante.
     --------------------------------------------------------------- */

  /* Primárias */
  --ct-baunilha:        #FAF3E4;  /* fundo principal           */
  --ct-cacau:           #4A2E1C;  /* texto, títulos, traços    */
  --ct-mel:             #C98A3C;  /* acento dourado            */

  /* Secundárias */
  --ct-creme:           #F4E9D6;  /* superfícies, cards        */
  --ct-ambar:           #9A5E1E;  /* acento escuro / CTA       */

  /* Terciária */
  --ct-rosa-canela:     #C98B7C;  /* datas especiais, detalhe  */

  /* Tons de apoio (derivados, para profundidade e estados) */
  --ct-cacau-90:        #5A3B27;  /* cacau levemente clareado  */
  --ct-cacau-60:        #8A6A52;  /* texto secundário, legenda */
  --ct-cacau-30:        #C9B7A6;  /* placeholders, desabilitado*/
  --ct-baunilha-fundo:  #FCF7EC;  /* baunilha quase branco     */
  --ct-papel:           #FFFDF8;  /* "papel" mais claro        */
  --ct-mel-claro:       #E9C892;  /* mel suave, fundos de tag  */
  --ct-mel-escuro:      #B0772B;  /* mel para hover de CTA     */
  --ct-rosa-claro:      #EAD3CB;  /* fundo suave rosa canela   */

  /* Linhas / fios — separam sem cortar */
  --ct-fio:             #E3D3BB;  /* hairline padrão           */
  --ct-fio-forte:       #D8C09B;  /* hairline com mais presença*/
  --ct-fio-cacau:       rgba(74, 46, 28, 0.14); /* fio sobre baunilha */

  /* Papéis semânticos (use estes nos componentes) */
  --bg:                 var(--ct-baunilha);
  --bg-surface:         var(--ct-creme);
  --bg-raised:          var(--ct-papel);
  --bg-inverse:         var(--ct-cacau);

  --text:               var(--ct-cacau);
  --text-muted:         var(--ct-cacau-60);
  --text-soft:          var(--ct-cacau-30);
  --text-inverse:       var(--ct-baunilha);

  --accent:             var(--ct-mel);
  --accent-strong:      var(--ct-ambar);
  --accent-special:     var(--ct-rosa-canela);

  --border:             var(--ct-fio);
  --border-strong:      var(--ct-fio-forte);

  /* ---------------------------------------------------------------
     TIPOGRAFIA
     Fraunces — nome e títulos (itálico no "Tranquilino").
     Hanken Grotesk — texto, preços, legendas, cardápio.
     Contraste: gesto amplo (serifa) contra detalhe miúdo (sans).
     --------------------------------------------------------------- */
  --font-display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-text:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Eixo óptico do Fraunces — mais "soft" para títulos grandes */
  --fraunces-soft: "opsz" 144, "SOFT" 50, "WONK" 0;
  --fraunces-text: "opsz" 24,  "SOFT" 0,  "WONK" 0;

  /* Escala tipográfica (modular ~1.25, base 16px) */
  --text-overline: 0.6875rem;  /* 11px — rótulos minúsculos e precisos */
  --text-caption:  0.75rem;    /* 12px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1rem;       /* 16px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.375rem;   /* 22px */
  --text-2xl:      1.75rem;    /* 28px */
  --text-3xl:      2.25rem;    /* 36px */
  --text-4xl:      3rem;       /* 48px */
  --text-5xl:      4rem;       /* 64px — assinatura, monumental */
  --text-6xl:      5.5rem;     /* 88px */

  /* Pesos */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Altura de linha — respirada */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Espaçamento entre letras */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.18em;  /* caixa-alta dos rótulos precisos */

  /* ---------------------------------------------------------------
     ESPAÇO — margens generosas, o silêncio entre uma fornada e outra
     Base 4px. O vazio é deliberado.
     --------------------------------------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ---------------------------------------------------------------
     RAIO — suave, como canto de cartão de papel
     --------------------------------------------------------------- */
  --radius-xs:  2px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
     SOMBRA — luz baixa, ar morno; sombra de papel sobre mesa
     --------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(74, 46, 28, 0.06);
  --shadow-md:  0 4px 16px rgba(74, 46, 28, 0.08);
  --shadow-lg:  0 12px 32px rgba(74, 46, 28, 0.10);
  --shadow-seal: 0 2px 10px rgba(74, 46, 28, 0.18);

  /* ---------------------------------------------------------------
     MOVIMENTO — nada apressado
     --------------------------------------------------------------- */
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;

  /* ---------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------- */
  --container:      72rem;   /* 1152px */
  --container-text: 40rem;   /* medida de leitura confortável */
  --stroke-line:    1.5px;   /* espessura dos fios/ícones (eco do logo) */
}