/* ==========================================================================
   TOKENS — variáveis de design
   Paleta, escala de espaçamento, tipografia e raios.
   Trocar a marca inteira = mexer só neste arquivo.
   ========================================================================== */

:root {
  /* ---------- Swatches ---------- */
  /* Sistema ECOSS: navy proprietário como base, verde apenas como acento. */
  --swatch--neutral-xxdark: #16202c;
  --swatch--neutral-xdark: #222a36;
  --swatch--neutral-dark: #2e3540;
  /* Terceiro degrau da escada escura, um passo à frente do xdark. Existe
     para uma seção por página ler como "outra sala" sem virar outro tema:
     mesmo matiz 215°, então nenhum componente precisa de variante nova —
     texto claro sobre escuro continua valendo. */
  --swatch--neutral-deep: #1b2c42;
  --swatch--neutral-light: #f0f2fd;
  --swatch--neutral-cream: #eef1ea;  /* creme das seções claras — o azul-gelo é o --primary-ltyellow */
  --swatch--neutral-slate: #7e85a6;
  --swatch--neutral-mute: #7e85a6;

  --swatch--primary-accent: #cbff54;
  --swatch--accent-soft: #d8ff85;
  --swatch--accent-pink: #5cc8ff;
  --swatch--primary-pink: #5cc8ff;
  --swatch--primary-ltyellow: #d4eaff;
  --swatch--primary-yellow: #5cc8ff;
  --swatch--banner-pastel: #5bd6a3;

  /* Nomes preservados para compatibilidade com os componentes existentes. */
  --swatch--brand-navy: #01001b; /* chão da referência; nome histórico */
  --swatch--accent-royal: #203d65;
  --swatch--accent-royal-deep: #142743;

  --swatch--shade-light-5: #f0f2fd0d;
  --swatch--shade-light-10: #f0f2fd1a;
  --swatch--shade-light-25: #f0f2fd40;
  /* Texto fraco. O -25 acima serve para BORDA, onde 25% é o desejado;
     como cor de letra ele dá 2.1:1 sobre o fundo da página e reprova.
     55% dá 5.4:1 e continua lendo como secundário. */
  --swatch--shade-light-55: #f0f2fd8c;
  --swatch--shade-light-75: #f0f2fdbf;
  --swatch--surface-hover: #f0f2fd12;
  --swatch--shade-xdark-10: #222a361a;
  --swatch--shade-xdark-80: #222a36cc;
  --swatch--utility-error: #ff3131;
  --swatch--utility-focus: var(--swatch--primary-accent);

  /* ---------- Escala de tamanho (rem = px / 16) ---------- */
  --size--0px: 0rem;
  --size--2px: 0.125rem;
  --size--4px: 0.25rem;
  --size--6px: 0.375rem;
  --size--8px: 0.5rem;
  --size--10px: 0.625rem;
  --size--12px: 0.75rem;
  --size--14px: 0.875rem;
  --size--16px: 1rem;
  --size--18px: 1.125rem;
  --size--20px: 1.25rem;
  --size--24px: 1.5rem;
  --size--32px: 2rem;
  --size--40px: 2.5rem;
  --size--48px: 3rem;
  --size--56px: 3.5rem;
  --size--64px: 4rem;
  --size--72px: 4.5rem;
  --size--80px: 5rem;
  --size--88px: 5.5rem;
  --size--96px: 6rem;
  --size--104px: 6.5rem;
  --size--112px: 7rem;
  --size--120px: 7.5rem;
  --size--128px: 8rem;
  --size--136px: 8.5rem;
  --size--144px: 9rem;
  --size--152px: 9.5rem;
  --size--160px: 10rem;
  --size--168px: 10.5rem;
  --size--176px: 11rem;

  /* ---------- Raios ---------- */
  --radius--xs: var(--size--4px);
  --radius--sm: var(--size--8px);
  --radius--md: var(--size--14px);
  --radius--lg: var(--size--8px);
  --radius--xl: 100vw;

  /* ---------- Fontes ---------- */
  /* primary = mono (labels, botões, etiquetas) | secondary = texto e títulos */
  --font--primary-family: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font--secondary-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --font-weight--400: 400;
  --font-weight--500: 500;
  --font-weight--600: 600;
  --font--primary-regular: var(--font-weight--400);
  --font--primary-medium: var(--font-weight--500);
  --font--primary-bold: var(--font-weight--600);

  /* ---------- Métricas de texto ---------- */
  --line-height--sm: 1;
  --line-height--md: 1.75;
  --line-height--lg: 2;
  --letter-spacing--sm: -0.02em;
  --letter-spacing--md: 0em;
  --letter-spacing--lg: 1em;

  --text-transform--none: none;
  --text-transform--uppercase: uppercase;
  --text-transform--inherit: inherit;

  /* ---------- Escala tipográfica ---------- */
  --heading-display--font-size: var(--size--128px);
  --heading-4xl--font-size: var(--size--80px);
  --heading-3xl--font-size: var(--size--64px);
  --heading-2xl--font-size: var(--size--56px);
  --heading-xl--font-size: var(--size--48px);
  --heading-lg--font-size: var(--size--40px);
  --heading-md--font-size: var(--size--32px);
  --heading-sm--font-size: var(--size--24px);
  --heading-xs--font-size: var(--size--18px);

  --heading--font-family: var(--font--secondary-family);
  --heading--font-weight: var(--font--primary-medium);
  --heading--letter-spacing: var(--letter-spacing--sm);
  --heading--line-height: var(--line-height--sm);

  --paragraph-lg--font-size: var(--size--18px);
  --paragraph-md--font-size: var(--size--16px);
  --paragraph-sm--font-size: var(--size--14px);
  --paragraph-xs--font-size: var(--size--12px);

  --body--font-family: var(--font--secondary-family);
  --body--font-size: var(--size--16px);
  --body--font-weight: var(--font--primary-regular);
  --body--line-height: var(--line-height--md);

  /* ---------- Layout ---------- */
  --max-width--sm: 1128px;
  --max-width--md: 1440px;
  --max-width--lg: 1680px;

  --padding-vertical--none: var(--size--0px);
  --padding-vertical--sm: var(--size--24px);
  --padding-vertical--md: var(--size--80px);
  --padding-vertical--lg: var(--size--136px);

  --padding-horizontal--none: var(--size--0px);
  --padding-horizontal--sm: var(--size--24px);
  --padding-horizontal--md: var(--size--40px);
  --padding-horizontal--lg: var(--size--136px);

  --gap--sm: var(--size--16px);
  --gap--md: var(--size--32px);
  --gap--lg: var(--size--64px);
  --gap--xl: var(--size--80px);

  /* ---------- Movimento ---------- */
  /* o easing assinatura do site — usado em praticamente toda transição */
  --ease--main: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --ease--chars: cubic-bezier(0.625, 0.05, 0, 1);

  /* medido em runtime pelo JS da nav */
  --nav-height: 5rem;
}

/* ==========================================================================
   Breakpoints — só reescrevem tokens, nunca regras de componente.
   É o que mantém o CSS enxuto no original.
   ========================================================================== */

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --heading-display--font-size: var(--size--80px);
    --heading-4xl--font-size: var(--size--64px);
  }
}

/* Landscape */
@media screen and (max-width: 767px) {
  :root {
    --heading-display--font-size: var(--size--72px);
    --heading-4xl--font-size: var(--size--56px);
    --heading-3xl--font-size: var(--size--48px);
    --heading-2xl--font-size: var(--size--48px);
    --gap--md: var(--size--40px);
    --gap--lg: var(--size--40px);
  }
}

/* Portrait */
@media screen and (max-width: 479px) {
  :root {
    --padding-vertical--md: var(--size--40px);
    --padding-vertical--lg: var(--size--80px);
    --padding-horizontal--sm: var(--size--16px);
    --padding-horizontal--md: var(--size--16px);
    --padding-horizontal--lg: var(--size--16px);

    --heading-display--font-size: var(--size--48px);
    --heading-4xl--font-size: var(--size--48px);
    --heading-3xl--font-size: var(--size--32px);
    --heading-2xl--font-size: var(--size--32px);
    --heading-xl--font-size: var(--size--32px);
    --heading-lg--font-size: var(--size--24px);
    --heading-md--font-size: var(--size--18px);
    --heading-sm--font-size: var(--size--18px);
    --paragraph-lg--font-size: var(--size--16px);
  }
}