/* ==========================================================================
   DESIGN TOKENS
   Arquitetura de 3 camadas (convenção padrão, mesma ideia de Radix/Material):

   1. PRIMITIVOS  valores crus, sem significado. Nunca usar direto em componente.
   2. SEMÂNTICOS  papel na interface (bg-canvas, text-secondary). É o que o CSS usa.
   3. COMPONENTE  quando um componente precisa de um valor próprio.

   Trocar a identidade visual depois = mexer só na camada 1 e no mapeamento da 2.
   Nenhum componente conhece um valor cru, então nada quebra.

   Fase atual: escala de cinza. Cor, tipografia definitiva, arredondamento e
   persona ainda não foram decididos (ver brand/design-tokens.md).
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. PRIMITIVOS
     ---------------------------------------------------------------------- */

  /* Rampa neutra. Índice = luminosidade percebida (0 claro, 1000 escuro).
     Nomeada por número, não por uso, justamente pra sobreviver à troca de tema. */
  --gray-0:    #ffffff;
  --gray-50:   #f7f7f8;
  --gray-100:  #ededef;
  --gray-200:  #d9d9dd;
  --gray-300:  #b8b8bf;
  --gray-400:  #8f8f99;
  --gray-450:  #7d7d87;   /* degrau extra: o nível terciário de texto */
  --gray-500:  #6b6b75;
  --gray-600:  #4d4d56;
  --gray-700:  #35353c;
  --gray-800:  #232328;
  --gray-900:  #161619;
  --gray-950:  #0e0e10;
  --gray-1000: #000000;

  /* Famílias. Uma só por enquanto: em grayscale a hierarquia tem que vir de
     escala, peso e espaço, não de contraste entre fontes. Os dois tokens já
     existem separados pra que trocar o display depois seja uma linha. */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipográfica. Fluida onde importa (display), fixa onde precisa
     ser previsível (corpo, labels). Salto proposital entre -xl e -2xl: o
     "meio" da escala é onde a hierarquia morre. */
  --text-2xs:  0.6875rem;   /* 11px  labels, índices, meta */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px  corpo */
  --text-lg:   1.125rem;    /* 18px  corpo destacado */
  --text-xl:   1.375rem;    /* 22px  lead */
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-3xl:  clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --text-4xl:  clamp(2.5rem, 1.4rem + 5vw, 5rem);
  --text-5xl:  clamp(2.75rem, 0.5rem + 8vw, 8rem);

  /* Tracking. Regra: quanto maior o tamanho, mais negativo. Uppercase pequeno
     sempre positivo, senão vira borrão. */
  --tracking-tighter: -0.045em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.012em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;

  --leading-none:    0.92;
  --leading-tight:   1.06;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Espaçamento. Base 4px. Nomes por número, não por tamanho relativo
     ("sm/md/lg" quebram quando você precisa de um valor entre dois). */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* Arredondamento. Deliberadamente quase zero nesta fase: canto reto lê como
     editorial/sério, canto redondo lê como app/amigável. É uma das decisões
     cosméticas ainda em aberto, por isso está tokenizado e não hardcoded. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 999px;

  --border-hairline: 1px;
  --border-thick:    2px;

  /* Motion. Curvas nomeadas por intenção. A "expressive" é pra revelação de
     conteúdo, a "standard" pra estado de UI (hover, foco). */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expressive: cubic-bezier(0.22, 1, 0.36, 1);

  --duration-instant: 120ms;
  --duration-fast:    220ms;
  --duration-base:    380ms;
  --duration-slow:    720ms;

  /* Layout */
  --container-max: 1440px;
  --gutter: var(--space-5);
  --section-gap: var(--space-24);

  /* Vão de uma faixa full-bleed entre duas seções. Menor que `--section-gap`
     porque a faixa é pontuação, não capítulo, e escala junto com ele: se só
     um dos dois crescer, a moldura da faixa deixa de ser moldura. */
  --section-gap-tight: var(--space-20);
  --nav-height: 64px;

  /* Elevação. Em dark, sombra quase não existe: profundidade vem de
     luminosidade de superfície. Mantido tokenizado pro tema claro. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.06);

  --z-nav: 100;
  --z-overlay: 200;
}

@media (min-width: 640px)  { :root { --gutter: var(--space-8);  } }
@media (min-width: 1024px) { :root { --gutter: var(--space-12); --section-gap: var(--space-32); --section-gap-tight: var(--space-24); --nav-height: 72px; } }
@media (min-width: 1440px) { :root { --gutter: var(--space-16); --section-gap: var(--space-40); --section-gap-tight: var(--space-32); } }

/* ==========================================================================
   2. SEMÂNTICOS

   Dark é o padrão, não uma variação. A direção pedida (misterioso, premium)
   nasce escura; o claro é a alternativa. Por isso o tema escuro mora no
   :root e o claro sobrescreve, e não o contrário.
   ========================================================================== */

:root {
  /* Fundos, do mais ao fundo pro mais à frente */
  --bg-canvas:  var(--gray-950);
  --bg-surface: var(--gray-900);
  --bg-raised:  var(--gray-800);
  --bg-inverse: var(--gray-50);

  /* Texto. A distância entre primary e secondary é o que cria o "recuo":
     secundário precisa exigir um segundo de atenção, não gritar junto. */
  --text-primary:   var(--gray-50);
  --text-secondary: var(--gray-400);
  /* Era --gray-500: 3,66:1 sobre o canvas, reprovado no AA (mínimo 4,5:1)
     e aplicado justamente no menor texto do site, o label de 11px. Subiu
     um degrau da rampa e passou a 5,17:1, sem virar o mesmo cinza do
     secundário: a distância entre os dois níveis continua legível. */
  --text-tertiary:  var(--gray-450);
  --text-inverse:   var(--gray-950);

  /* Bordas. Subtle é quase invisível de propósito: estrutura sem ruído. */
  --border-subtle:  var(--gray-800);
  --border-default: var(--gray-700);
  --border-strong:  var(--gray-500);

  /* Interativos. Sem cor de marca ainda: o "acento" é o próprio contraste
     máximo. Quando a paleta existir, é só remapear estes quatro. */
  --interactive-primary-bg:       var(--gray-50);
  --interactive-primary-bg-hover: var(--gray-300);
  --interactive-primary-text:     var(--gray-950);
  --interactive-secondary-bg:     transparent;
  --interactive-secondary-text:   var(--gray-50);

  --focus-ring: var(--gray-300);

  /* Placeholder de mídia. Provisório: quando as imagens reais entrarem
     (Fase 4, Bloco 3), estes dois tokens somem. */
  --media-placeholder: var(--gray-800);
  --media-placeholder-line: var(--gray-700);

  /* Figura do hero. Dois níveis: a trama de base, que é o campo em repouso,
     e o brilho, que é o campo resolvido. O contraste entre as duas é o efeito
     inteiro, então elas andam juntas: subir só uma achata a diferença entre
     estar anônimo e ter resolvido, que é a peça toda.

     Subiram um degrau cada em 31/08/2026, a pedido do Lucas: com a figura
     ocupando mais tela, os valores antigos ficaram submersos demais. */
  --figure-line:  var(--gray-600);
  --figure-glow:  var(--gray-300);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-canvas:  var(--gray-0);
  --bg-surface: var(--gray-50);
  --bg-raised:  var(--gray-100);
  --bg-inverse: var(--gray-950);

  --text-primary:   var(--gray-950);
  /* Os dois níveis desceram um degrau. O terciário era --gray-400: 3,20:1
     sobre branco, o pior contraste do site inteiro. Só ele descer não
     resolvia: a janela entre 4,5:1 (o mínimo) e os 5,27:1 do secundário é
     estreita demais pra caber dois níveis que precisam ser distinguíveis.
     Descendo os dois, secundário vai a 8,36:1 e terciário a 5,27:1, ambos
     aprovados e com distância visível entre eles. Fundo branco pede mais
     peso de tinta que fundo preto pra mesma leitura. */
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-inverse:   var(--gray-50);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-500);

  --interactive-primary-bg:       var(--gray-950);
  --interactive-primary-bg-hover: var(--gray-700);
  --interactive-primary-text:     var(--gray-50);
  --interactive-secondary-bg:     transparent;
  --interactive-secondary-text:   var(--gray-950);

  --focus-ring: var(--gray-600);

  --media-placeholder: var(--gray-100);
  --media-placeholder-line: var(--gray-200);

  /* No tema claro a trama precisa de mais peso pra não sumir no branco,
     e o brilho fica mais escuro que a base, não mais claro.

     A base subiu um degrau junto com a do escuro em 31/08/2026, mas o brilho
     ficou onde estava: no claro o estado resolvido é traço escuro sobre branco,
     que já é o par de maior contraste do site. Subir os dois punha a figura
     acima do título em peso, que é o inverso do que ela é. */
  --figure-line:  var(--gray-300);
  --figure-glow:  var(--gray-500);

  color-scheme: light;
}