/* World IT Mission — design tokens
   Fonte da verdade visual. Landing e portal importam este arquivo.
   Origem das cores/tipografia: kaleuproduz.it (lido do CSS) + logo B "Pico". */

:root {
  /* Cor — base */
  --ink: #111315;          /* fundo principal */
  --ink-2: #181b1e;        /* superfície (cards, sidebar) */
  --ink-3: #202428;        /* superfície elevada / hover */
  --paper: #efefea;        /* texto sobre ink; fundo das seções claras */
  --paper-2: #e2e2da;      /* superfície sobre paper */

  /* Cor — acento (um só protagonista) */
  --acid: #d9ff3f;         /* ação, foco, progresso, o "farol" do logo */
  --acid-press: #c3ea2a;
  --rust: #ff4f24;         /* erro, alerta, urgência; nunca decoração */

  /* Texto */
  --text: var(--paper);
  --text-muted: rgba(239, 239, 234, 0.72);   /* 8.7:1 sobre ink */
  --text-faint: rgba(239, 239, 234, 0.55);   /* 5.5:1 sobre ink, 5.1:1 sobre ink-3 */
  --text-on-paper: var(--ink);
  --text-on-paper-muted: rgba(17, 19, 21, 0.72);
  --text-on-acid: var(--ink);

  /* Linhas */
  --line: rgba(239, 239, 234, 0.16);
  --line-strong: rgba(239, 239, 234, 0.32);
  --line-on-paper: rgba(17, 19, 21, 0.18);

  /* Tipografia */
  --font-sans: Arial, Helvetica, sans-serif;            /* títulos 900 e UI */
  --font-serif: Georgia, "Times New Roman", serif;      /* acento itálico */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 7.2vw, 6rem);
  --fs-h1: clamp(2.25rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.6vw, 3rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-display: 0.92;
  --lh-heading: 1.05;
  --lh-body: 1.6;
  --track-display: -0.035em;
  --track-heading: -0.02em;
  --track-label: 0.12em;
  --measure: 68ch;

  /* Espaço (base 4) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Forma */
  --radius: 0;             /* cantos retos, como a referência */
  --radius-round: 999px;   /* só avatar */
  --border: 1px solid var(--line);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --topbar-h: 64px;
  --sidebar-w: 248px;
  --player-list-w: 380px;

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 600ms;

  /* Foco */
  --focus: 2px solid var(--acid);
  --focus-offset: 3px;
}

/* Tema claro por contexto: .on-paper redefine os papéis, componentes não mudam */
.on-paper {
  --text: var(--ink);
  --text-muted: var(--text-on-paper-muted);
  --text-faint: rgba(17, 19, 21, 0.6);
  --line: var(--line-on-paper);
  --line-strong: rgba(17, 19, 21, 0.4);
  --focus: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* Superfícies do navegador, tematizadas */
::selection { background: var(--acid); color: var(--ink); }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
html { scrollbar-color: var(--line-strong) var(--ink); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
input, textarea { caret-color: var(--acid); }
table, .tnum { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}