/* Tokens do design system "Modernist", já com a paleta do portfólio aplicada.
   Este arquivo é a fonte da verdade do visual: mexer aqui muda o site inteiro.

   Tema: quem manda é o `color-scheme` logo abaixo. Cada token que muda entre
   claro e escuro é declarado uma vez só, com light-dark(claro, escuro) — não
   existe um bloco de tema separado para manter em sincronia. */

:root {
  /* Sem escolha do visitante, segue a preferência do sistema; o CSS resolve
     isso antes da primeira pintura, então a página nunca pisca no tema errado. */
  color-scheme: light dark;

  /* — cores base — */
  --color-bg: light-dark(#f2f2f3, #17191b);
  --color-surface: light-dark(#e9e9ea, #232629);
  --color-text: light-dark(#1d1f20, #f1f2f3);
  --color-accent: light-dark(#5980a6, #84aed6);
  --color-accent-2: #728fab;
  --color-divider: light-dark(
    color-mix(in srgb, #1d1f20 16%, transparent),
    color-mix(in srgb, #f1f2f3 42%, transparent)
  );

  /* Rampas tonais — geradas em OKLCH sobre uma mesma escala de luminosidade,
     então o mesmo passo de qualquer papel tem o mesmo valor visual. No escuro
     a escala inverte: o 100 é o mais escuro e o 900 o mais claro. */
  --color-neutral-100: light-dark(#f5f5f8, #232629);
  --color-neutral-200: light-dark(#e7e7ea, #2f3337);
  --color-neutral-300: light-dark(#d4d4d7, #3e4247);
  --color-neutral-400: light-dark(#b7b7ba, #545a5f);
  --color-neutral-500: light-dark(#98989b, #8e9498);
  --color-neutral-600: light-dark(#7a7a7d, #a9aeb2);
  --color-neutral-700: light-dark(#5d5d60, #c3c8cb);
  --color-neutral-800: light-dark(#424244, #e0e3e5);
  --color-neutral-900: light-dark(#2b2b2d, #f5f6f7);

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: light-dark(#597ea3, #416180);
  --color-accent-700: light-dark(#416180, #9ec4e8);
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  /* — tipografia — */
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: 'Archivo', system-ui, sans-serif;

  /* — espaçamento — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* — raio — */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevação — sombras suaves tingidas de tinta. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* — layout da página — */
  --page-max: 1280px;
  --page-gutter: clamp(20px, 5vw, 72px);
}

/* Escolha explícita no botão de tema: fixa o esquema e ignora o sistema. */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }