/* ==========================================================================
   ETÉRA HOME — DESIGN TOKENS
   Fonte: Figma "Étera Home LP Lançamento | 2026" — página Style Guide
   Breakpoints: mobile (default) | -lg a partir de 1366px | -xl a partir de 1920px
   ========================================================================== */

@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 {
  /* ---- 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 ----
     Os valores 🖥️ (desktop) do Figma foram intencionalmente ignorados a
     pedido do cliente: o tamanho definido em 💻 (notebook/-lg) é mantido
     também no -xl. Por isso a maioria dos tokens é constante entre
     breakpoints — só o h1 muda. */
  --font-size-xs: 0.75rem;      /* 12px em todos os breakpoints */
  --font-size-sm: 0.875rem;     /* 14px em todos os breakpoints */
  --font-size-base: 1rem;       /* 16px em todos os breakpoints */
  --h3-font-size: 1rem;         /* 16px em todos os breakpoints */
  --h2-font-size: 1.25rem;      /* 20px em todos os breakpoints */
  --h1-font-size: 1.5rem;       /* 24px mobile */

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

  /* ---- Letter Spacing ---- */
  --letter-spacing-sm: 0.03em;
  --letter-spacing-default: 0.1em;
  --letter-spacing-md: 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: 999px;
  --border-radius-circular: 50%;

  /* ---- Border Width ---- */
  --border-width-none: 0px;
  --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;

  /* ---- Shade Levels (preto sobreposto) ---- */
  --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 (branco sobreposto) ---- */
  --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);

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

  /* ---- Neutral Colors ---- */
  --white: #d6d3cb;
  --gray-100: #d6d3cb;
  --gray-200: #d6d3cb;
  --gray-300: #d6d3cb;
  --gray-400: #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 Colors ---- */
  --feedback-color-danger: #dc3545;
  --feedback-color-warning: #ffc107;
  --feedback-color-success: #198754;

  /* ---- Shadow ----
     Valores extraídos dos Effect Styles reais vinculados no Figma
     (as anotações de texto do token sm/default estavam duplicadas por
     engano no arquivo — os estilos aplicados foram usados como fonte). */
  --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 12px rgba(0, 0, 0, 0.5);

  /* ---- Grid System ----
     Mobile: 4 cols, 100% largura, padding 16px, gap 16px
     LG (Notebook): 12 cols, container 1120px, padding 0, gap 32px
     XL (Desktop): 12 cols, container 1440px, padding 0, gap 32px */
  --container-max-width: 1120px;
  --container-padding: 16px;
  --grid-gap: 16px;
}

/* -------------------- Breakpoint: Notebook (-lg) -------------------- */
@media (min-width: 1366px) {
  :root {
    --h1-font-size: 2rem; /* 32px a partir do -lg, mantido igual no -xl */
    --container-max-width: 1120px;
    --container-padding: 0px;
    --grid-gap: 32px;
  }
}

/* -------------------- Breakpoint: Desktop (-xl) -------------------- */
@media (min-width: 1920px) {
  :root {
    --container-max-width: 1440px;
    --container-padding: 0px;
    --grid-gap: 32px;
  }
}