:root {
  /* Ecoss foundations — the aliases below preserve the existing application API. */
  --font-display:'Newsreader',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  /* Avatar de pessoa (e de fonte): quadrado arredondado em toda a plataforma (2026-10-29).
     Proporcional ao tamanho, então vale de 16px a 168px. O Eco (agente) continua círculo. */
  --avatar-radius:30%;
  --paper:#F6F7F9;--white:#FFFFFF;--ink:#0F1419;--gold:#C59A42;
  --neutral-900:#1B2128;--neutral-700:#4A5563;--neutral-500:#697382;
  --neutral-300:#C5CBD3;--neutral-200:#E3E7EC;--neutral-100:#EEF1F4;--neutral-50:#F3F5F8;
  --type-film:#5D7FE8;--type-article:#8A6BE8;--type-book:#5C9D59;--type-video:#E45757;
  --type-hack:#D38A32;--type-tool:#4F8F91;--type-person:#C27B53;--type-podcast:#B35C8C;
  --type-community:#16a34a;--type-course:#78350f;--type-event:#78350f;
  --tone-gold:#b98732;--tone-copper:#9f542f;--tone-earth:#76513d;--tone-graphite:#393733;--tone-olive:#666044;
  --bg:var(--paper);--surface:var(--white);--ink-2:var(--neutral-700);--ink-3:var(--neutral-500);
  --line:var(--neutral-200);--accent:var(--gold);--accent-soft:#FBF6E9;--accent-mid:#E5D3A5;
  --green:#16a34a;--green-bg:#f0fdf4;--warn:#b45309;--warn-bg:#fffbeb;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:80px;--space-10:80px;
  --text-xs:10px;--text-sm:12px;--text-md:14px;--text-lg:16px;--text-xl:18px;--text-2xl:24px;--text-3xl:30px;--text-4xl:42px;--text-5xl:52px;
  --radius-small:6px;--radius-default:10px;--radius-large:12px;--radius-pill:999px;
  --r:var(--radius-default);
  --shadow-sm:0 2px 8px rgba(16,24,40,.05);
  --shadow:0 2px 8px rgba(16,24,40,.05);
  --shadow-lg:0 12px 28px rgba(16,24,40,.10);
  --card-height-standard:286px;
  --card-height-unified:540px;
  --card-height-compact:170px;
  --card-height-portrait:285px;
  --card-height-stack:170px;
  --card-footer-height:48px;
  --card-media-person-height:184px;
  --card-cover-tool-height:178px;
  --card-cover-article-height:182px;
  --card-aspect-portrait:2 / 3;
  --card-radius:var(--radius-large);
  --card-border:var(--neutral-200);
  --card-surface:var(--white);
  --card-shadow:0 2px 8px rgba(16,24,40,.05);
  --card-shadow-hover:0 12px 28px rgba(16,24,40,.10);
  --card-media-square:1 / 1;
  --card-media-landscape:16 / 10;
  --card-media-portrait:2 / 3;
  --card-media-compact:4 / 3;
  --card-footer-size:48px;
  --focus-ring:0 0 0 3px rgba(201,168,76,.32);
  --card-width-primary:320px;
  --card-height-primary:540px;
  --card-cover-primary-height:240px;
  --card-width-mobile:288px;
  --card-height-mobile:510px;
  --accent-terracotta:#8B4A2F;
  --card-glass-bg:rgba(255,255,255,.86);
  --card-glass-border:rgba(255,255,255,.55);
  --card-glass-shadow:0 4px 24px rgba(0,0,0,.07);
  color-scheme:light;
  /* Tokens semânticos (camada pública do design system; ver docs/design-system.md). Novos componentes usam estes nomes. */
  --bg-app:var(--paper);--bg-sidebar:var(--white);--bg-surface:var(--white);--bg-surface-hover:var(--neutral-50);--bg-elevated:var(--white);
  --border-subtle:var(--neutral-200);--border-strong:var(--neutral-300);
  --text-primary:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-3);
  --accent-primary:var(--gold);--accent-hover:#B88A33;--accent-on:#0F1419;
  --status-positive:#13694A;--status-warning:#8A5A0A;--status-negative:#9A4B45;--status-information:#1F5E9E;
  --duration-hover:140ms;--duration-state:160ms;--duration-panel:220ms;
}

/* Tema escuro — aplicado via [data-theme="dark"] no <html>, controlado por js/theme.js */
:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#090C10;--white:#141920;--ink:#F4F6F8;--gold:#D6A74F;
  --neutral-900:#F4F6F8;--neutral-700:#A9B3BF;--neutral-500:#8A95A3;
  --neutral-300:#38434F;--neutral-200:#252D37;--neutral-100:#1B222B;--neutral-50:#11161C;
  --bg:var(--paper);--surface:var(--white);--ink-2:var(--neutral-700);--ink-3:var(--neutral-500);
  --line:var(--neutral-200);--accent-soft:#2a2214;--accent-mid:#5a4a26;
  --green:#69C69A;--green-bg:#10241b;--warn:#E4B55F;--warn-bg:#2b200c;
  --bg-sidebar:#0C1015;--bg-surface-hover:#1B222B;--bg-elevated:#1E2630;
  --accent-hover:#E8BF71;
  --status-positive:#69C69A;--status-warning:#E4B55F;--status-negative:#CF928B;--status-information:#78ABDF;
  --card-border:var(--neutral-200);--card-surface:var(--white);
  --card-shadow:0 2px 8px rgba(0,0,0,.28);--card-shadow-hover:0 8px 24px rgba(0,0,0,.4);
  --shadow-sm:0 2px 8px rgba(0,0,0,.28);--shadow:0 2px 8px rgba(0,0,0,.28);--shadow-lg:0 8px 24px rgba(0,0,0,.4);
  --card-glass-bg:rgba(30,30,26,.86);--card-glass-border:rgba(255,255,255,.12);--card-glass-shadow:0 4px 24px rgba(0,0,0,.35);
}

/* O app sempre escreve data-theme no <html> antes do primeiro paint (script de
   boot no index.html). Um documento SEM data-theme é, por definição, uma página
   que não carrega o app — hoje, a página pública de perfil. Para ela o tema vem
   da preferência do sistema. As declarações abaixo são as mesmas do bloco acima;
   tests/tokens.mjs falha se as duas listas divergirem. */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
  color-scheme:dark;
  --paper:#090C10;--white:#141920;--ink:#F4F6F8;--gold:#D6A74F;
  --neutral-900:#F4F6F8;--neutral-700:#A9B3BF;--neutral-500:#8A95A3;
  --neutral-300:#38434F;--neutral-200:#252D37;--neutral-100:#1B222B;--neutral-50:#11161C;
  --bg:var(--paper);--surface:var(--white);--ink-2:var(--neutral-700);--ink-3:var(--neutral-500);
  --line:var(--neutral-200);--accent-soft:#2a2214;--accent-mid:#5a4a26;
  --green:#69C69A;--green-bg:#10241b;--warn:#E4B55F;--warn-bg:#2b200c;
  --bg-sidebar:#0C1015;--bg-surface-hover:#1B222B;--bg-elevated:#1E2630;
  --accent-hover:#E8BF71;
  --status-positive:#69C69A;--status-warning:#E4B55F;--status-negative:#CF928B;--status-information:#78ABDF;
  --card-border:var(--neutral-200);--card-surface:var(--white);
  --card-shadow:0 2px 8px rgba(0,0,0,.28);--card-shadow-hover:0 8px 24px rgba(0,0,0,.4);
  --shadow-sm:0 2px 8px rgba(0,0,0,.28);--shadow:0 2px 8px rgba(0,0,0,.28);--shadow-lg:0 8px 24px rgba(0,0,0,.4);
  --card-glass-bg:rgba(30,30,26,.86);--card-glass-border:rgba(255,255,255,.12);--card-glass-shadow:0 4px 24px rgba(0,0,0,.35);
  }
}

/* A home pública (marketing, não autenticada) sempre é clara — o fundo dela é
   fixo em branco/pontilhado e nunca foi desenhada para o tema escuro. Sem isso,
   textos que usam var(--ink)/var(--ink-2) ficam claros sobre o fundo branco fixo
   e somem. Precisa de especificidade maior que a regra de tema escuro acima. */
:root[data-theme="dark"].is-home-view {
  --paper:#F6F7F9;--white:#fff;--ink:#0F1419;
  --neutral-900:#1B2128;--neutral-700:#4A5563;--neutral-500:#697382;
  --neutral-300:#C5CBD3;--neutral-200:#E3E7EC;--neutral-100:#EEF1F4;--neutral-50:#F3F5F8;
  --bg:var(--paper);--surface:var(--white);--ink-2:var(--neutral-700);--ink-3:var(--neutral-500);
  --line:var(--neutral-200);--accent-soft:#FBF6E9;--accent-mid:#E5D3A5;
  --green-bg:#f0fdf4;--warn-bg:#fffbeb;
  --card-border:var(--neutral-200);--card-surface:var(--white);
  --card-shadow:0 2px 8px rgba(16,24,40,.05);--card-shadow-hover:0 12px 28px rgba(16,24,40,.10);
  --shadow-sm:0 2px 8px rgba(16,24,40,.05);--shadow:0 2px 8px rgba(16,24,40,.05);--shadow-lg:0 12px 28px rgba(16,24,40,.10);
  --card-glass-bg:rgba(255,255,255,.86);--card-glass-border:rgba(255,255,255,.55);--card-glass-shadow:0 4px 24px rgba(0,0,0,.07);
}