/* =========================================================================
   Etéra Work — Design Tokens
   Fonte: Figma "🎨 Style Guide" (node 704:172)
   Valores extraídos das variáveis vinculadas do arquivo, não dos rótulos
   de texto do guia (que ainda mostram a paleta padrão do template).

   Breakpoints do projeto:
     mobile   — base            (viewport de referência 360px)
     lg       — min-width 1366  (viewport de referência 1366px, notebook)
     xl       — min-width 1920  (viewport de referência 1920px, desktop)

   Os thresholds são iguais aos viewports de referência do Figma, por decisão
   do projeto. Consequência conhecida: o Firefox avalia media query sem a
   barra de rolagem, então numa janela de 1366px ele enxerga ~1351px e aplica
   o layout mobile. No Chrome e no Safari o comportamento é o esperado.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     Breakpoints (referência para leitura; as media queries usam literais)
     --------------------------------------------------------------------- */
  --bp-lg: 1366px;
  --bp-xl: 1920px;

  /* ---------------------------------------------------------------------
     Cores — Brand
     --------------------------------------------------------------------- */
  --brand-color-primary: #002328;
  --brand-color-primary-tint-1: #354445;
  --brand-color-secondary: #776e4e;

  /* Estilo "Brand/Secondary + Shade 2" usado na Section 3. Existe no arquivo
     do Figma mas não consta na página de Color Tokens do style guide. */
  --brand-color-secondary-shade-2: #231f12;
  --brand-color-secondary-shade-2-70: rgb(35 31 18 / 70%);

  /* Estilo "Brand/Terciary" usado nas Sections 3 e 11. Também ausente da
     página de Color Tokens do style guide. */
  --brand-color-terciary: #d1cfc8;
  --brand-color-terciary-60: rgb(209 207 200 / 60%);

  /* ---------------------------------------------------------------------
     Cores — Neutral
     --------------------------------------------------------------------- */
  --white: #ffffff;
  --gray-100: #f0f3f3;
  --gray-200: #d3d9da;
  --gray-300: #bed3d6;
  --gray-400: #85999c;
  --gray-500: #5a6668;
  --gray-600: #3d4546;
  --gray-700: #272b2c;
  --black: #111212;

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

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

  /* ---------------------------------------------------------------------
     Cores — Aplicação
     Derivado do canvas do style guide (fundo escuro, texto branco).
     Confirmar por seção quando o layout tiver blocos claros.
     --------------------------------------------------------------------- */
  --color-bg: var(--black);
  --color-text: var(--white);

  /* ---------------------------------------------------------------------
     Tipografia — Famílias
     --------------------------------------------------------------------- */
  --font-family-01: "Sinkin Sans", sans-serif;
  --font-family-02: "TT Norms", sans-serif;

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

  /* ---------------------------------------------------------------------
     Tipografia — Tamanhos (valores 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.75rem;    /* 28px */

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

  /* ---------------------------------------------------------------------
     Tipografia — Letter spacing
     --------------------------------------------------------------------- */
  --letter-spacing-sm: 0;
  --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;

  /* ---------------------------------------------------------------------
     Shade levels (quanto de preto misturar a uma cor)
     Uso: color-mix(in srgb, var(--brand-color-primary), #000 var(--shade-level-2))
     --------------------------------------------------------------------- */
  --shade-level-1: 16%;
  --shade-level-2: 24%;
  --shade-level-3: 32%;
  --shade-level-4: 40%;

  /* ---------------------------------------------------------------------
     Tint levels (quanto de branco misturar a uma cor)
     Uso: color-mix(in srgb, var(--brand-color-primary), #fff var(--tint-level-2))
     --------------------------------------------------------------------- */
  --tint-level-1: 16%;
  --tint-level-2: 24%;
  --tint-level-3: 32%;
  --tint-level-4: 40%;

  /* ---------------------------------------------------------------------
     Shadow
     --------------------------------------------------------------------- */
  --shadow-sm: 0 4px 8px 0 rgb(0 0 0 / 50%);
  --shadow-default: 0 8px 24px 0 rgb(0 0 0 / 50%);
  --shadow-lg: 0 16px 32px 0 rgb(0 0 0 / 50%);

  /* ---------------------------------------------------------------------
     Grid system — $column-grid-sm (mobile)
     --------------------------------------------------------------------- */
  --container-max: 100%;
  --container-padding: 16px;
  --grid-columns: 4;
  --grid-gap: 16px;
}

/* =========================================================================
   LG — Notebook (min-width: 1366px)
   ========================================================================= */

@media (min-width: 1366px) {
  :root {
    --h1-font-size: 2rem;     /* 32px */

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

/* =========================================================================
   XL — Desktop (min-width: 1920px)
   ========================================================================= */

@media (min-width: 1920px) {
  :root {
    --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: 2.75rem;    /* 44px */

    /* $column-grid-xl */
    --container-max: 1440px;
  }
}