/* =========================================================================
   ETÉRA HOME — LP Lançamento 2026
   Design System — tokens, tipografia, grid e utilitários
   Fonte da verdade: Figma "🎨 Style Guide" › Design Tokens (node 704:172)
   ========================================================================= */

/* =========================================================================
   1. FONTES (self-hosted — Sinkin Sans e TT Norms não existem no Google Fonts)
   ========================================================================= */

@font-face {
  font-family: "Sinkin Sans";
  src: url("../../Handoff/Fonts/SINKIN%20SANS%20FAMILY/OTF/SinkinSans-300Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sinkin Sans";
  src: url("../../Handoff/Fonts/SINKIN%20SANS%20FAMILY/OTF/SinkinSans-400Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sinkin Sans";
  src: url("../../Handoff/Fonts/SINKIN%20SANS%20FAMILY/OTF/SinkinSans-500Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

/* =========================================================================
   2. TOKENS — :root (valores mobile / SM)
   ========================================================================= */

:root {
  /* ---------- Font Family ---------- */
  --font-family-01: "Sinkin Sans", sans-serif;
  --font-family-02: "TT Norms", sans-serif;

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

  /* ---------- Font Size (📱 mobile) ---------- */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --h3-font-size: 1rem;       /* 16px */
  --h2-font-size: 1.25rem;    /* 20px */
  --h1-font-size: 1.5rem;     /* 24px */

  /* ---------- Line Height ---------- */
  --line-height-default: 1.4;
  --line-height-md: 1.6;

  /* ---------- Letter Spacing ---------- */
  --letter-spacing-sm: 0.03em;
  --letter-spacing-default: 0.1em;
  --letter-spacing-md: 0.3em;

  /* ---------- Border Radius ---------- */
  --border-radius-none: 0;
  --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: 0;
  --border-width-default: 1px;
  --border-width-md: 2px;

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

  /* ---------- Brand Colors ---------- */
  --brand-color-primary: #3f2a26;
  --brand-color-secondary: #97413b;

  /* ---------- Neutral ---------- */
  --white: #d6d3cb;
  --gray-500: #bdb1ad;
  --gray-600: #7d6c6c;
  --gray-700: #574c49;
  --gray-800: #403934;
  --gray-900: #292321;
  --black: #000000;

  /* ---------- Light and Dark ---------- */
  --light: #f8f9fa;
  --dark: #212529;

  /* ---------- Feedback ---------- */
  --feedback-color-danger: #dc3545;
  --feedback-color-warning: #ffc107;
  --feedback-color-success: #198754;

  /* ---------- Shade Levels (overlay preto) ---------- */
  --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 $white · #D6D3CB) ---------- */
  --tint-level-1: rgba(214, 211, 203, 0.16);
  --tint-level-2: rgba(214, 211, 203, 0.24);
  --tint-level-3: rgba(214, 211, 203, 0.32);
  --tint-level-4: rgba(214, 211, 203, 0.4);

  /* ---------- Shadow (cor $black · opacidade $opacity-level-medium) ---------- */
  --shadow-sm: 0 16px 24px 0 rgba(0, 0, 0, 0.5);
  --shadow-default: 0 16px 24px 0 rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 48px 12px rgba(0, 0, 0, 0.5);

  /* ---------- Grid System — SM (Mobile) ---------- */
  --grid-columns: 4;
  --grid-gap: 16px;
  --container-max: 100%;
  --container-padding: 16px;
}

/* ---------- LG (Notebook · artboard 1366px) ---------- */
@media (min-width: 1366px) {
  :root {
    /* Font Size 💻 */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --h3-font-size: 1rem;      /* 16px */
    --h2-font-size: 1.25rem;   /* 20px */
    --h1-font-size: 2rem;      /* 32px */

    /* Grid */
    --grid-columns: 12;
    --grid-gap: 32px;
    --container-max: 1120px;
    --container-padding: 0px;
  }
}

/* ---------- XL (Desktop · artboard 1920px) ---------- */
@media (min-width: 1920px) {
  :root {
    /* Font Size 🖥️ */
    --font-size-xs: 1rem;      /* 16px */
    --font-size-sm: 1.125rem;  /* 18px */
    --font-size-base: 1.25rem; /* 20px */
    --h3-font-size: 1.25rem;   /* 20px */
    --h2-font-size: 1.75rem;   /* 28px */
    --h1-font-size: 2rem;      /* 32px */

    /* Grid */
    --grid-columns: 12;
    --grid-gap: 32px;
    --container-max: 1440px;
    --container-padding: 0px;
  }
}

/* =========================================================================
   3. RESET
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* =========================================================================
   4. BASE / TIPOGRAFIA
   Estilos de texto conforme Figma › Font Tokens
   ========================================================================= */

body {
  background-color: var(--brand-color-primary);
  color: var(--light);
  font-family: var(--font-family-01);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-sm);
  line-height: var(--line-height-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Heading ---------- */
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-md);
}

h1,
.h1 {
  font-size: var(--h1-font-size);
}

h2,
.h2 {
  font-size: var(--h2-font-size);
}

h3,
.h3 {
  font-size: var(--h3-font-size);
}

/* ---------- Label ---------- */
.label,
.label-sm {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

.label {
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-default);
}

.label-sm {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-md);
}

/* ---------- P ----------
   P e P SM aceitam light/regular (+ medium no SM e XS) via .is-regular / .is-medium */
p,
.p,
.p-sm,
.p-xs {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
}

p,
.p,
.p-sm {
  letter-spacing: var(--letter-spacing-sm);
  line-height: var(--line-height-default);
}

p,
.p {
  font-size: var(--font-size-base);
}

.p-sm {
  font-size: var(--font-size-sm);
}

.p-xs {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-md);
}

/* Variações de peso previstas nos estilos de texto */
.is-light {
  font-weight: var(--font-weight-light);
}

.is-regular {
  font-weight: var(--font-weight-regular);
}

.is-medium {
  font-weight: var(--font-weight-medium);
}

/* =========================================================================
   5. LAYOUT — container e grid de colunas
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* Spans de coluna — 1 a 4 valem no mobile (4 colunas); 5 a 12 só a partir de LG */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }

@media (min-width: 1366px) {
  .col-lg-1  { grid-column: span 1; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
}

/* =========================================================================
   6. IMAGENS — padrão obrigatório
   O wrapper define o aspect-ratio exato do Figma; a imagem preenche sem distorcer.
   ========================================================================= */

.image-wrapper {
  width: 100%;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-wrapper--contain img {
  object-fit: contain;
}

/* ---------- Background responsivo com @2x ----------
   Padrão a ser replicado por seção. Handoff: sem sufixo = mobile,
   -lg = notebook (≥1366px), -xl = desktop (≥1920px), + variação @2x.

   .bg-exemplo {
     background-image: url("../../Handoff/Images/img-hero.jpg");
     background-image: -webkit-image-set(
       url("../../Handoff/Images/img-hero.jpg") 1x,
       url("../../Handoff/Images/img-hero@2x.jpg") 2x);
     background-image: image-set(
       url("../../Handoff/Images/img-hero.jpg") 1x,
       url("../../Handoff/Images/img-hero@2x.jpg") 2x);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
   }
   @media (min-width: 1366px) { ... -lg / -lg@2x ... }
   @media (min-width: 1920px) { ... -xl / -xl@2x ... }
*/

/* =========================================================================
   7. ACESSIBILIDADE
   ========================================================================= */

:focus-visible {
  outline: var(--border-width-md) solid var(--light);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: var(--container-padding);
  background-color: var(--brand-color-secondary);
  color: var(--light);
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* =========================================================================
   8. MOVIMENTO
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}