/* ==========================================================================
   Design Tokens — Raízes di Verona LP
   Fonte: Figma / "Design Tokens" (node 4207:712)
   Tokens SCSS ($token) convertidos para custom properties CSS (--token).
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     Font Family
     ---------------------------------------------------------------------- */
  --font-family-01: "Fraunces", serif;
  --font-family-02: "Urbanist", sans-serif;

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

  /* ----------------------------------------------------------------------
     Font Size — escala única (coluna 💻 do doc de tokens do Figma)

     O doc "Design Tokens" documenta três colunas (🖥️ 1920 / 💻 1366 / 📱 360),
     mas os dois layouts entregues da LP (360px e 1366px) usam a coluna 💻 nos
     dois breakpoints: o mobile não encolhe o token, ele troca o estilo
     (ex.: h1 do hero usa Display 1 no desktop e Display 2 no mobile).
     Manter as três colunas quebraria a fidelidade dos layouts, então a escala
     aqui é única. As colunas 📱 e 🖥️ não são exercidas por esta LP.
     ---------------------------------------------------------------------- */
  --font-size-xxs: 10px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --h2-font-size: 28px;
  --h1-font-size: 32px;
  --display-2: 40px;
  --display-1: 58px;

  /* ----------------------------------------------------------------------
     Line Height
     ---------------------------------------------------------------------- */
  --line-height-sm: 1;
  --line-height-default: 1.2;
  --line-height-md: 1.4;

  /* ----------------------------------------------------------------------
     Letter Spacing
     ---------------------------------------------------------------------- */
  --letter-spacing-default: 0;
  --letter-spacing-md: 0.02em;

  /* ----------------------------------------------------------------------
     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-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
     ---------------------------------------------------------------------- */
  --shade-level-1: 0.16;
  --shade-level-2: 0.24;
  --shade-level-3: 0.32;
  --shade-level-4: 0.4;

  /* ----------------------------------------------------------------------
     Tint Levels
     ---------------------------------------------------------------------- */
  --tint-level-1: 0.16;
  --tint-level-2: 0.24;
  --tint-level-3: 0.32;
  --tint-level-4: 0.4;

  /* ----------------------------------------------------------------------
     Breakpoints
     Derivados das larguras do Grid System.
     ---------------------------------------------------------------------- */
  --breakpoint-sm: 360px;
  --breakpoint-lg: 1366px;
  --breakpoint-xl: 1920px;

  /* ----------------------------------------------------------------------
     Grid System — SM (Mobile), valor base
     ---------------------------------------------------------------------- */
  --column-grid-sm-columns: 4;
  --column-grid-sm-width: 100%;
  --column-grid-sm-padding: 16px;
  --column-grid-sm-gap: 16px;

  /* Grid System — LG (Notebook) */
  --column-grid-lg-columns: 12;
  --column-grid-lg-width: 1120px;
  --column-grid-lg-padding: 0px;
  --column-grid-lg-gap: 32px;

  /* Grid System — XL (Desktop) */
  --column-grid-xl-columns: 12;
  --column-grid-xl-width: 1440px;
  --column-grid-xl-padding: 0px;
  --column-grid-xl-gap: 32px;

  /* Grid ativo — reatribuído por breakpoint abaixo */
  --column-grid-columns: var(--column-grid-sm-columns);
  --column-grid-width: var(--column-grid-sm-width);
  --column-grid-padding: var(--column-grid-sm-padding);
  --column-grid-gap: var(--column-grid-sm-gap);
}

/* ==========================================================================
   LG — Notebook e acima (💻 1366px)
   Único breakpoint da LP: abaixo disso vale o layout mobile, fluido.
   O grid XL (1440px) fica declarado acima, mas não é ativado — não existe
   layout de 1920px entregue, e o layout de "1366px+" vale daí para cima.
   ========================================================================== */

@media (min-width: 1366px) {
  :root {
    --column-grid-columns: var(--column-grid-lg-columns);
    --column-grid-width: var(--column-grid-lg-width);
    --column-grid-padding: var(--column-grid-lg-padding);
    --column-grid-gap: var(--column-grid-lg-gap);
  }
}