/* ============================================================
   RESERVA STUDIO — Design Tokens (v1.0 · 2026)
   Extraído do Manual de Identidade Visual.
   Fonte única da verdade para cores, tipografia, espaçamento.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     1. CORES — PALETA OFICIAL (4 cores da marca)
     Proporção de uso: Creme + Preto ~80% · Cinza ~15% · Dourado ~5%
     --------------------------------------------------------- */
  --rs-preto:    #14140F; /* Preto Reserva  · rgb(20,20,15)    — tinta principal / fundo escuro */
  --rs-creme:    #F4F4EF; /* Creme Reserva  · rgb(244,244,239) — fundo principal (substitui o branco) */
  --rs-cinza:    #85898A; /* Cinza Reserva  · rgb(133,137,138) — tinta secundária / apoio em fundo escuro */
  --rs-dourado:  #C49A5E; /* Dourado Reserva· rgb(196,154,94)  — acento (ícones, links, CTA). Nunca texto corrido. */

  /* ---------------------------------------------------------
     2. CORES — NEUTROS DE APOIO (derivados, uso interno de UI)
     Harmônicos e quentes, coerentes com a paleta oficial.
     --------------------------------------------------------- */
  --rs-grafite:      #3A3A34; /* superfície escura secundária / texto forte sobre creme */
  --rs-carvao:       #4A4A44; /* texto secundário sobre creme */
  --rs-cinza-claro:  #A9AEAF; /* texto desativado / placeholders */
  --rs-areia:        #E3D9C6; /* superfície sutil (tom claro do dourado) / destaques quentes */
  --rs-creme-fundo:  #EBEAE3; /* superfície elevada sobre o creme (cards) */
  --rs-borda:        #E4E2DA; /* divisórias e bordas sobre creme */
  --rs-linha:        #DDDDDD; /* hairline neutra */
  --rs-branco:       #FFFFFF; /* uso raro — nunca como fundo de página */

  /* Dourado em variações controladas */
  --rs-dourado-escuro: #A97F45; /* hover de links/CTA */
  --rs-dourado-claro:  #DDBC87; /* estados sutis / focus ring */

  /* ---------------------------------------------------------
     3. CORES — SEMÂNTICAS (estados)
     --------------------------------------------------------- */
  --rs-sucesso:  #4A7C4A;
  --rs-erro:     #A34A3A;
  --rs-alerta:   #B3452F; /* terracota — avisos / ações destrutivas */

  /* ---------------------------------------------------------
     4. PAPÉIS SEMÂNTICOS — TEMA CLARO (padrão · fundo Creme)
     --------------------------------------------------------- */
  --bg:             var(--rs-creme);
  --surface:        var(--rs-creme-fundo);
  --surface-warm:   var(--rs-areia);
  --border:         var(--rs-borda);
  --text:           var(--rs-preto);
  --text-secondary: var(--rs-carvao);
  --text-muted:     var(--rs-cinza);
  --accent:         var(--rs-dourado);
  --accent-hover:   var(--rs-dourado-escuro);
  --on-accent:      var(--rs-preto);
  --link:           var(--rs-dourado-escuro);
  --focus-ring:     var(--rs-dourado);

  /* ---------------------------------------------------------
     5. TIPOGRAFIA
     Serifada (Lora): logotipo, títulos, citações, capas.
     Sem serifa (Poppins): corpo, legendas, botões, interface.
     --------------------------------------------------------- */
  --font-serif: "Lora", "Georgia", "Times New Roman", serif;
  --font-sans:  "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Pesos */
  --fw-light:    300; /* Poppins */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;

  /* Escala tipográfica (base 16px · razão ~1.2) */
  --fs-display: 3.052rem;  /* ~49px — capas / número de seção */
  --fs-h1:      2.441rem;  /* ~39px — Lora */
  --fs-h2:      1.953rem;  /* ~31px — Lora */
  --fs-h3:      1.563rem;  /* ~25px — Lora */
  --fs-h4:      1.25rem;   /* ~20px — Lora/Poppins */
  --fs-lead:    1.125rem;  /* ~18px — subtítulo/lead — Poppins */
  --fs-body:    1rem;      /* 16px — corpo — Poppins */
  --fs-small:   0.875rem;  /* 14px — legendas — Poppins */
  --fs-caption: 0.75rem;   /* 12px — micro / labels — Poppins */

  /* Altura de linha */
  --lh-tight:   1.15;  /* títulos */
  --lh-snug:    1.35;  /* subtítulos */
  --lh-normal:  1.6;   /* corpo */

  /* Espaçamento entre letras */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.08em;  /* botões / labels em caixa alta */
  --ls-wider:   0.16em;  /* números de seção / kicker */

  /* ---------------------------------------------------------
     6. ESPAÇAMENTO (base 4px)
     --------------------------------------------------------- */
  --space-0:  0;
  --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 */

  /* ---------------------------------------------------------
     7. RAIO DE BORDA
     Inspirado no arco suave do símbolo — cantos macios, nunca duros.
     --------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px 12px 12px; /* forma de arco (topo arredondado) */

  /* ---------------------------------------------------------
     8. SOMBRAS — discretas e quentes (nunca duras/frias)
     --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 20, 15, 0.08);
  --shadow-lg: 0 12px 40px rgba(20, 20, 15, 0.12);

  /* ---------------------------------------------------------
     9. LAYOUT
     --------------------------------------------------------- */
  --container:  1120px;
  --measure:    68ch;   /* largura ideal de leitura */
  --border-w:   1px;

  /* 10. MOVIMENTO — suave e sem pressa */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  400ms;
}

/* ============================================================
   TEMA ESCURO — fundo Preto Reserva
   Ativar com <html data-theme="dark"> ou classe .theme-dark
   ============================================================ */
:root[data-theme="dark"],
.theme-dark {
  --bg:             var(--rs-preto);
  --surface:        #1E1E18;
  --surface-warm:   #26251E;
  --border:         #33332C;
  --text:           var(--rs-creme);
  --text-secondary: #C9C7BE;
  --text-muted:     var(--rs-cinza);
  --accent:         var(--rs-dourado);
  --accent-hover:   var(--rs-dourado-claro);
  --on-accent:      var(--rs-preto);
  --link:           var(--rs-dourado);
  --focus-ring:     var(--rs-dourado-claro);
}