/* ==========================================================================
   Etéra Stay — Design Tokens
   Fonte: Figma "Étera Stay (LP Lançamento) 2026" — Style Guide (node 704:172)
   Gerado a partir de get_variable_defs / get_design_context (Figma MCP)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes (self-hosted — arquivos entregues em Handoff/Fonts, sem equivalente
   no Google Fonts)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Sinkin Sans";
  src: url("../fonts/SinkinSans-300Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sinkin Sans";
  src: url("../fonts/SinkinSans-400Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sinkin Sans";
  src: url("../fonts/SinkinSans-500Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("../fonts/TTNorms-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     Cores — Brand
     ------------------------------------------------------------------------ */
  --brand-color-primary: #B8AB17;
  --brand-color-secondary: #4F4427;

  /* Cores — Neutral */
  --white: #D6D3CB;
  --gray-100: rgba(214, 211, 203, 0.9);
  --gray-200: #D6D3CB;
  --gray-300: rgba(214, 211, 203, 0.7);
  --gray-400: rgba(214, 211, 203, 0.5);
  --gray-500: #5A6668;
  --gray-600: #7D6C6C;
  --gray-700: #272B2C;
  --gray-800: #403934;
  --gray-900: #292321;
  --black: #000000;
  /* gray-600/800/900 ainda não confirmados em uso real — ver aviso no chat */

  /* Cores — Light and Dark */
  --color-light: #F8F9FA;
  --color-dark: #212529;

  /* Cores — Feedback */
  --color-danger: #DC3545;
  --color-warning: #FFC107;
  --color-success: #198754;

  /* ------------------------------------------------------------------------
     Tipografia — Font Family
     Nota: o label do token no Figma diz "Inter" para $font-family-02, mas os
     estilos de texto reais (Label/P) e a prévia do token usam "TT Norms".
     Mantido "TT Norms" por ser o valor efetivamente aplicado no arquivo.
     ------------------------------------------------------------------------ */
  --font-family-01: "Sinkin Sans", sans-serif;
  --font-family-02: "TT Norms", sans-serif;

  /* Tipografia — Font Weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Tipografia — Font Size (mobile-first; valores 📱 = base, sobrescritos em
     Notebook ≥1024px — ver seção "Breakpoints" abaixo. Desktop ≥1440px
     mantém os mesmos valores do Notebook, por decisão do usuário) */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --h3-font-size: 16px;
  --h2-font-size: 20px;
  --h1-font-size: 28px;

  /* Tipografia — Line Height */
  --line-height-sm: 1.3;
  --line-height-default: 1.4;
  --line-height-md: 1.6;

  /* Tipografia — Letter Spacing (em em, relativo ao font-size do elemento) */
  --letter-spacing-default: 0em;
  --letter-spacing-md: 0.2em;
  --letter-spacing-lg: 0.3em;

  /* ------------------------------------------------------------------------
     Border Radius
     ------------------------------------------------------------------------ */
  --border-radius-none: 0px;
  --border-radius-xs: 8px;
  --border-radius-sm: 12px;
  --border-radius-default: 16px;
  --border-radius-lg: 48px;
  --border-radius-pill: 500px;
  --border-radius-circular: 50%;

  /* Border Width */
  --border-width-none: 0px;
  --border-width-default: 1px;
  --border-width-md: 2px;

  /* ------------------------------------------------------------------------
     Opacity Levels
     ------------------------------------------------------------------------ */
  --opacity-level-none: 0;
  --opacity-level-semi-transparent: 0.08;
  --opacity-level-faint: 0.16;
  --opacity-level-lighter: 0.24;
  --opacity-level-light: 0.32;
  --opacity-level-medium: 0.5;
  --opacity-level-intense: 0.64;
  --opacity-level-semi-opaque: 0.8;
  --opacity-level-default: 1;

  /* Shade Levels (overlay preto, para escurecer) */
  --shade-level-1: rgba(0, 0, 0, 0.16);
  --shade-level-2: rgba(0, 0, 0, 0.24);
  --shade-level-3: rgba(0, 0, 0, 0.32);
  --shade-level-4: rgba(0, 0, 0, 0.4);

  /* Tint Levels (overlay branco, para clarear) */
  --tint-level-1: rgba(255, 255, 255, 0.16);
  --tint-level-2: rgba(255, 255, 255, 0.24);
  --tint-level-3: rgba(255, 255, 255, 0.32);
  --tint-level-4: rgba(255, 255, 255, 0.4);

  /* ------------------------------------------------------------------------
     Shadow
     ------------------------------------------------------------------------ */
  --shadow-sm: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
  --shadow-default: 0px 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0px 16px 32px 0px rgba(0, 0, 0, 0.5);

  /* ------------------------------------------------------------------------
     Grid System (mobile-first)
     ------------------------------------------------------------------------ */
  --grid-columns-sm: 4;
  --container-sm: 100%;
  --grid-gap-sm: 16px;
  --grid-padding-sm: 16px;

  --grid-columns-lg: 12;
  --container-lg: 1120px;
  --grid-gap-lg: 32px;
  --grid-padding-lg: 0px;

  --grid-columns-xl: 12;
  --container-xl: 1440px;
  --grid-gap-xl: 32px;
  --grid-padding-xl: 0px;
}

/* ----------------------------------------------------------------------------
   Breakpoints (assumidos — o Figma só define larguras de canvas/grid, não
   media queries. Combinado com o usuário: Notebook ≥1024px, Desktop ≥1440px)
   ---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --h3-font-size: 16px;
    --h2-font-size: 20px;
    --h1-font-size: 32px;
  }
}

/* Desktop (≥1440px) mantém intencionalmente os mesmos font-sizes do
   Notebook — combinado com o usuário, os valores 🖥️ do Figma deixavam o
   texto grande demais em telas largas. */