/* ==========================================================================
   DESIGN TOKENS — fonte de verdade para todas as telas do projeto NITT
   Extraído do Figma (Redesign NITT) — frames "Home" (53:2835),
   "O NITT" (53:3295), "Nosso portfólio" (53:3651) e "Contato" (53:3914)
   ========================================================================== */

:root {
  /* ---- Cores — Primary (Blue Accent) ---- */
  --color-primary-600: #2563eb; /* Primary/600 - Blue Accent */
  --color-primary-500: #3b82f6; /* Primary/500 - Blue Mid */
  --color-primary-300: #93c5fd; /* Primary/300 - Blue Light */
  --color-primary-200: #bfdbfe; /* Primary/200 - Blue Pale Light */
  --color-primary-100: #dbeafe; /* Primary/100 - Blue Pale */
  --color-primary-50: #eff6ff; /* Primary/50 - Blue Faint */

  /* ---- Cores — Neutral ---- */
  --color-neutral-900: #0b1f3a; /* Neutral/900 - Dark */
  --color-neutral-700: #475569; /* Neutral/700 - Slate Dark */
  --color-neutral-600: #64748b; /* Neutral/600 - Slate */
  --color-neutral-0: #ffffff; /* Neutral/0 - White */

  /* ---- Cores — campos de formulário (componente de UI kit reaproveitado no Figma) ---- */
  --color-form-border: #dcddde;
  --color-form-placeholder: #6f707f; /* Neutral/600 (variante usada apenas nos inputs) */

  /* ---- Cores auxiliares (gradientes / overlays / vidro) ---- */
  --color-gradient-start: #2563eb;
  --color-gradient-end: #007aff;
  --color-overlay-black-50: rgba(0, 0, 0, 0.5);
  --color-overlay-black-0: rgba(102, 102, 102, 0);
  --color-glass-white-30: rgba(255, 255, 255, 0.3);
  --color-glass-white-05: rgba(255, 255, 255, 0.05);
  --color-glass-border-50: rgba(255, 255, 255, 0.5);

  /* ---- Tipografia — família ---- */
  --font-family-base: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-family-icons-outlined: "Material Symbols Outlined";
  --font-family-icons-rounded: "Material Symbols Rounded";

  /* ---- Tipografia — pesos ---- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ---- Tipografia — escala (tamanho / altura de linha / letter-spacing) ---- */
  --font-size-h1: 4rem; /* 64px — Heading/H1 */
  --line-height-h1: 1.05;

  --font-size-h2: 2.125rem; /* 34px — Heading/H2 */
  --line-height-h2: 1.176; /* ~40px */

  --font-size-h3: 1.5rem; /* 24px — Heading/H3 */
  --line-height-h3: 1;

  --font-size-h4: 1.375rem; /* 22px — Heading/H4 */
  --line-height-h4: 1;

  --font-size-body-lg: 1.25rem; /* 20px — Body/Large */
  --line-height-body-lg-regular: 1.5;
  --line-height-body-lg-bold: 1;

  --font-size-body-sm: 0.875rem; /* 14px — Body/Small Bold */
  --line-height-body-sm: 1.7143; /* 24px */
  --line-height-body-sm-regular: 1.4; /* Body/Small Regular */

  --font-size-body-base: 1rem; /* 16px — Body/Base */
  --line-height-body-base-medium: 1.5; /* 24px — Body/Base Medium */
  --line-height-body-base-semibold: 1.4; /* 22.4px — Body/Base Semi Bold */
  --line-height-body-base-bold: 1; /* Body/Base Bold */

  --letter-spacing-base: 0;

  /* ---- Espaçamento (escala extraída do frame) ---- */
  --space-0-5: 0.125rem; /* 2px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-2-5: 0.625rem; /* 10px */
  --space-3: 1rem; /* 16px */
  --space-4: 1.25rem; /* 20px */
  --space-5: 1.3125rem; /* 21px */
  --space-5-5: 1.75rem; /* 28px */
  --space-6: 2rem; /* 32px */
  --space-7: 2.5rem; /* 40px */
  --space-8: 3rem; /* 48px */
  --space-9: 3.5625rem; /* 57px */
  --space-10: 3.75rem; /* 60px */
  --space-11: 4rem; /* 64px */
  --space-12: 5rem; /* 80px */
  --space-13: 6.875rem; /* 110px */
  --space-14: 7.5rem; /* 120px */
  --space-15: 7.875rem; /* 126px */
  --space-16: 9.8125rem; /* 157px */
  --space-17: 10rem; /* 160px */

  /* ---- Raios de borda ---- */
  --radius-4: 0.25rem; /* 4px — select compacto (itens por página) */
  --radius-8: 0.5rem; /* 8px — botões numéricos de paginação */
  --radius-12: 0.75rem; /* 12px — campo de busca, itens do portfólio */
  --radius-sm: 1rem; /* 16px — cards, botões */
  --radius-underline: 1.875rem; /* 30px — indicador do menu ativo */
  --radius-pill: 3.125rem; /* 50px — badges/etiquetas */
  --radius-full: 9999px;

  /* ---- Espessura de borda ---- */
  --border-width-1: 1px;
  --border-width-3: 3px;
  --border-width-6: 6px;
  --border-width-7: 7px;

  /* ---- Sombras / desfoque ---- */
  --shadow-card: 0 4px 24px rgba(11, 31, 58, 0.08);
  --shadow-button: 0 8px 20px rgba(37, 99, 235, 0.25);
  --blur-glass: 16.5px;

  /* ---- Gradientes ---- */
  --gradient-academy: linear-gradient(-61.43deg, var(--color-gradient-start) 6.59%, var(--color-gradient-end) 84.02%);
  --gradient-thumb-overlay: linear-gradient(-0.58deg, var(--color-overlay-black-50) 30.15%, var(--color-overlay-black-0) 141.01%);

  /* ---- Layout ---- */
  --container-max-width: 1920px;
  --container-content-width: 1432px;
  --sidebar-width: 21.875rem; /* 350px */
  --header-offset: 8.5rem; /* altura aproximada do cabeçalho + respiro, usada por elementos sticky */
  --transition-base: 0.2s ease;
}