/* ==========================================================
   Eduardo Zapata, Portfolio V2, Design System
   Tokens em CSS custom properties. Fonte: 02-interface/tokens.md
   ----------------------------------------------------------
   Identidade baseada na referência de estilo https://neiden.framer.media/
   (valores extraídos do site via estilos computados, 2026-10-12).
   Quando houver Figma da V2, os valores são revalidados via pixel-perfect.
   ========================================================== */

/* Fontes: DM Sans (tudo), Cal Sans (palavra gigante da hero, igual à referência) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Cal+Sans&display=swap');

:root {
  /* ---------- Cores base ---------- */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-100: #F2F2F2;        /* fundo de seção clara alternada */
  --color-gray-200: #E5E5E5;        /* linhas e bordas sobre claro */
  --color-gray-900: #1F1F1F;        /* fundo de seção escura */
  --color-gray-950: #191919;        /* card sobre seção escura */
  --color-gray-980: #141414;        /* fundo da seção Case studies */
  --color-accent: #B88951;          /* bege do logotipo EZ3 (único acento) */
  --color-accent-soft: rgba(184, 137, 81, 0.35); /* bege claro: bordas sutis (imagens dos cases) */
  --color-accent-light: #EBD9C2;    /* bege bem claro: borda do hover dos cases (contraste 13:1 sobre #141414, acima do 5:1 pedido) */

  /* ---------- Fundos ---------- */
  --color-bg-primary: var(--color-white);   /* fundo padrão de todas as páginas */
  --color-bg-secondary: var(--color-gray-100);
  --color-bg-inverted: var(--color-black);
  --color-bg-dark: var(--color-gray-900);
  --color-bg-dark-raised: var(--color-gray-950);
  --color-bg-cases: var(--color-gray-980);   /* seção Case studies */
  --color-bg-header: var(--color-gray-980);  /* header fixo, sempre #141414 */
  --color-bg-accent: var(--color-accent);
  --color-bg-glass: rgba(255, 255, 255, 0.1); /* chip sobre fundo escuro */

  /* ---------- Texto sobre claro ---------- */
  --color-text-primary: var(--color-black);
  --color-text-secondary: rgba(0, 0, 0, 0.6);
  --color-text-tertiary: rgba(0, 0, 0, 0.4);
  --color-text-accent: var(--color-accent);
  --color-text-on-accent: var(--color-black); /* texto pequeno sobre o bege (contraste AA) */

  /* ---------- Texto sobre escuro ---------- */
  --color-text-inverted: var(--color-white);
  --color-text-inverted-secondary: rgba(255, 255, 255, 0.5);
  --color-text-inverted-tertiary: rgba(255, 255, 255, 0.3);

  /* ---------- Linhas e bordas ---------- */
  --color-line: var(--color-gray-200);
  --color-line-inverted: rgba(255, 255, 255, 0.1);
  --color-line-on-dark: #353535; /* linha sobre os cards escuros do About: mesma cor das linhas da seção Experience (branco 10% sobre #1F1F1F) */
  --color-border-focus: var(--color-accent);

  /* Fotos: na identidade nova as imagens têm cor */
  --image-filter: none;

  /* ---------- Hero: vídeo de fundo e granulado ---------- */
  --video-opacity: 0.12;  /* vídeo a 12%, pedido do Eduardo */
  --video-filter: grayscale(1); /* vídeo em P&B (o arquivo local já é P&B; mantido para outros vídeos) */
  /* Granulado (referência tbd Studio / efeito Grain do Framer): textura de
     ruído de 256px repetida, a 8%, pulando de posição a cada 0,15s.
     Usado na hero, nos cards de case e por cima de todas as imagens */
  --noise-opacity: 0.08;
  --noise-opacity-hero: 0.16; /* na hero, sobre o preto puro, o dobro para aparecer */
  --noise-size: 256px;

  /* Vidro padrão do iOS/Apple: branco translúcido (72%) + desfoque e saturação do que passa por trás */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-filter: saturate(180%) blur(20px);

  /* Logos das empresas no ticker da hero: brancos a 70% */
  --logo-opacity: 0.7;

  /* Pontos do canto da hero: 1,5px a cada 40px */

  /* Grafismo de pontos ao lado dos títulos (medidas em em: acompanha a fonte) */
  --title-dots-gap: 0.18em; /* padrão base de TODO grafismo de pontos (17px na fonte de 96px) */
  --title-dots-opacity: 0.35;

  /* Círculo bege nos cruzamentos das linhas do grid */
  --grid-dot-size: 3.5px; /* 50% menor (era 7px), mais sutil */

  /* Altura da barra de progresso de leitura no topo do header */
  --progress-height: 2px;

  /* Altura da faixa de desfoque no rodapé da tela */
  --bottom-blur-height: 140px;

  /* ---------- Famílias ---------- */
  --font-title: 'DM Sans', sans-serif;
  --font-text: 'DM Sans', sans-serif;
  --font-display: 'Cal Sans', 'DM Sans', sans-serif;

  /* ---------- Tamanhos de texto (ver tabela em tokens.md) ---------- */
  --fs-display: 160px;  /* palavra gigante (hero) */
  --fs-display-cases: 96px; /* título "Case studies" (referência Mugen) */
  --fs-h1: 70px;
  --fs-h2: 60px;
  --fs-h3: 30px;
  --fs-h4: 24px;
  --fs-lead: 20px;
  --fs-body-lg: 16px;
  --fs-body: 15px;
  --fs-small: 14px;
  --fs-label: 12px;
  --fs-meta: 11px;      /* metadados e tags em caixa alta */
  --fs-case-name: 40px; /* nome do projeto sobre a imagem do card */
  --fs-menu-link: 56px; /* links grandes do menu */
  /* Nome gigante da hero: o "E" encosta na linha da esquerda e o último "a"
     na linha da direita. A tinta de "Eduardo Zapata" em Cal Sans (com o
     tracking de -0,05em) mede 6,57 vezes o tamanho da fonte, então
     fonte = largura da caixa (100cqw) ÷ 6,57. Se o texto mudar, medir de novo. */
  --fs-hero-word: calc(100cqw / 6.57);
  --hero-word-ink-offset: -0.05em; /* a tinta do "E" começa 0,05em depois do início da linha */
  /* Nome gigante do rodapé ("Eduardo Zapata" em Cal Sans) da linha do grid até a
     borda direita do navegador: a medida da palavra é calibrada no navegador */
  --fs-footer-word: calc(100cqw / 8.25); /* largura total (6,6) com 20% a menos de altura */
  --fs-hero-text: 17px;              /* descrição da hero */

  /* Entrelinhas */
  --lh-tight: 1;        /* display, h1, labels */
  --lh-heading: 0.9;    /* h2 grande, colado */
  --lh-title: 1.1;      /* h3, h4 */
  --lh-text: 1.4;       /* textos */
  --lh-lead: 1.5;
  --lh-hero-word: 0.8;

  /* Tracking (DM Sans sempre fechado) */
  --tracking-display: -0.08em;
  --tracking-h1: -0.05em;
  --tracking-h2: -0.06em;
  --tracking-h3: -0.05em;
  --tracking-h4: -0.07em;
  --tracking-text: -0.04em;
  --tracking-label: -0.02em;
  --tracking-hero-word: -0.05em;

  /* Pesos */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Raios ---------- */
  --radius-none: 0;     /* tags (padrão: reto) */
  --radius-sm: 8px;     /* thumbnails, avatares quadrados */
  --radius-md: 10px;    /* selo numérico (01.) */
  --radius-btn: 8px;    /* raio padrão de TODOS os botões (header, hero, flutuantes, rodapé) */
  --radius-card: 16px;  /* imagens dos cases e das seções */
  --radius-lg: 25px;    /* chips flutuantes de dado */
  --radius-panel: 32px; /* blocos do menu */
  --radius-pill: 60px;  /* selo "popular", pílulas */

  /* ---------- Sombras ---------- */
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* ---------- Espaçamento ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;     /* espaço entre imagens/cards lado a lado (referência) */
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;
  --space-150: 150px;

  /* Altura do header. O JS (setupHeaderHeight) atualiza com o valor real */
  --header-h: 0px;

  /* ---------- Grid (estrutura medida em neiden.framer.media) ----------
     Desktop: 6 colunas iguais, sem gap, conteúdo até 1360px (pedido do
     Eduardo; a referência usa 1550px), margem lateral mínima de 40px.
     Blocos ocupam 2 (1/3), 4 (2/3) ou 6 colunas. */
  --grid-max: 1360px;
  --content-wide-ratio: 0.95; /* largura do conteúdo do header, da barra de logos da hero e dos cases */
  --content-wide: calc(var(--content-wide-ratio) * 100%);
  --grid-columns: 6;
  --page-gutter: var(--space-40);
  --section-pad: var(--space-150);   /* respiro vertical das seções */
}

/* Tablet (810 a 1199px, breakpoint da referência): respiro menor e títulos menores */
@media (max-width: 1199px) {
  :root {
    --section-pad: var(--space-100);
    --fs-display: 110px;
    --fs-h1: 56px;
    --fs-h2: 48px;
    --fs-display-cases: 72px;
    --fs-case-name: 32px;
    --fs-menu-link: 44px;
  }
}

/* Mobile (até 809px): margem de 20px, uma coluna */
@media (max-width: 809px) {
  :root {
    --page-gutter: var(--space-20);
    --fs-display: 64px;
    --fs-h1: 40px;
    --fs-h2: 36px;
    --fs-h3: 24px;
    --fs-display-cases: 56px;
    --fs-case-name: 28px;
    --fs-menu-link: 36px;
  }
}