/* ==========================================================================
   Bruno Castrillon — landing temporária de castrillon.dev
   Mood: codigo_noturno (entrada oficial em 06-design/references/moods.json).

   IDENTIDADE FORNECIDA, NÃO DERIVADA.
   design.identidade_fornecida_pelo_cliente = true. Todo valor de COR e de
   FONTE aqui foi copiado de clientes/bruno-castrillon-v5/design/tokens.css
   sem reinterpretação, por instrução direta do usuário. Este skill não
   escolheu paleta nenhuma — só decidiu como aplicar uma paleta pronta a uma
   página que tem uma seção e três ícones.

   O que MUDA em relação à v5, e por quê:

   1. --code-opacity: 0.05 → 0.03 (piso da faixa 0.03-0.06 que o mood
      permite). A v5 tem nove seções de conteúdo competindo com a textura;
      aqui a textura seria o elemento mais complexo de uma página quase
      vazia. No piso da faixa ela ainda cumpre o papel de assinatura sem
      virar o assunto principal.

   2. Máscara radial nova (--code-mask), que não existe na v5. A textura é
      apagada no centro, exatamente onde ficam os três ícones, e só aparece
      nas bordas do viewport. Na v5 a textura fica atrás de texto corrido,
      que a cobre naturalmente; aqui não há nada cobrindo nada, então o
      recorte precisa ser explícito.

   3. Tokens de escala tipográfica (--step-h1/h2/h3), de seção
      (--space-section) e de card (--radius-card) foram removidos: não há
      heading, não há seção com padding vertical, não há card. Manter token
      morto num arquivo de 3 ícones só cria a ilusão de que existe um
      sistema maior sendo usado.

   --------------------------------------------------------------------------
   CONTRASTE — medido, não presumido (WCAG 2.1 relative luminance)
   --------------------------------------------------------------------------
   Ícone em repouso  #E3EDEF sobre #0F1B1F .......... 14.73:1
   Ícone em hover    #22E5D0 sobre #0F1B1F .......... 11.02:1
   Rodapé/label      #7C8F94 sobre #050B0F ...........  5.86:1
   Pior caso real — sobre a textura composta (#061215):
   Texto  #E3EDEF ................................... 15.95:1
   Muted  #7C8F94 ...................................  5.62:1
   Mínimo AA: 4.5:1 para texto, 3:1 para gráfico. Passa em todos, com folga.

   --------------------------------------------------------------------------
   A REGRA DO MOOD QUE DECIDE A FORMA DOS ÍCONES
   --------------------------------------------------------------------------
   "cor_dominante usada como LUZ — glow, rim-light, borda — nunca como bloco
   sólido grande preenchido", e "botao_primario: NUNCA preenchido".
   Consequência: os três ícones NÃO são botões teal preenchidos. Cada um é
   uma superfície escura (#0F1B1F, a mesma cor de card da v5) com borda quase
   imperceptível; o teal só aparece em hover/foco, como borda e glow. Em
   repouso a página tem ZERO glow — o mood manda conter o glow a poucos
   elementos, e aqui o orçamento inteiro está reservado para o estado de
   interação, que é a única coisa que acontece nesta página.
   ========================================================================== */

:root {
  /* --- Cor — valores idênticos aos da v5, sem reinterpretação ----------- */
  --color-bg:         #050B0F;
  --color-surface:    #0F1B1F;
  --color-surface-2:  #132329;

  --color-accent:     #22E5D0;
  --color-accent-dim: #14A899;

  --color-text:       #E3EDEF;
  --color-text-muted: #7C8F94;

  --color-border:     #213338;
  --color-border-soft:#16252A;

  /* --- Glow — só no estado de interação --------------------------------- */
  --glow-soft:   0 0 0 1px rgba(34, 229, 208, .22), 0 0 24px rgba(34, 229, 208, .12);
  --glow-strong: 0 0 0 1px rgba(34, 229, 208, .55), 0 0 34px rgba(34, 229, 208, .28);

  /* --- Textura de código ------------------------------------------------ */
  --code-opacity: 0.03;
  /* Transparente no miolo, opaco nas bordas. O ponto de virada em 38% deixa
     a área dos ícones completamente limpa mesmo em viewport estreito. */
  --code-mask: radial-gradient(ellipse 62% 52% at 50% 50%,
                 transparent 0%, transparent 38%, #000 100%);

  /* --- Tipografia — mesmas três famílias da v5 -------------------------- */
  /* A mono é elemento_assinatura do mood, exceção deliberada ao limite de 2
     famílias do kit. Aqui ela carrega o rodapé e a textura — sem ela o mood
     não está aplicado, está simplificado. */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --tracking-label: 0.10em;
  --leading-body:   1.65;
  --step-label:     0.8125rem;

  /* --- Forma ------------------------------------------------------------ */
  --radius-button: 6px;
  --icon-tile:     clamp(3.5rem, 2.9rem + 2.6vw, 4.5rem);
  --icon-glyph:    clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem);
  --icon-gap:      clamp(1.25rem, 0.8rem + 1.9vw, 2.25rem);

  /* --- Movimento -------------------------------------------------------- */
  --motion-fade:  600ms;
  --motion-hover: 200ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fade:  1ms;
    --motion-hover: 1ms;
  }
}