/* desmos wizard: o sistema v2 (DESIGN-V2.md). Landing e app importam este arquivo e não inventam cor nem medida fora daqui. */
@import url('fontes.css');

:root {
  /* tinta e papel */
  --ink: #141416;          /* texto e botão neutro (grafite, como o Brilliant) */
  --ink-2: #3a3a40;        /* texto secundário forte */
  --mute: #686873;         /* texto de apoio: 4,6:1 no papel */
  --line: #e9e5df;         /* bordas e divisórias */
  --line-2: #d9d3ca;       /* borda de controle */
  --paper: #faf8f5;        /* fundo: branco quente */
  --surface: #ffffff;      /* cartões */
  --sunk: #f2efea;         /* área rebaixada, slot vazio */

  /* estados: só aparecem no momento deles */
  --ok: #12a150;           --ok-ink: #0b6b35;      --ok-bg: #e7f6ec;
  --quase: #e89a00;        --quase-ink: #7a5000;   --quase-bg: #fff3d6;   /* errou = "not quite", nunca vermelho */
  --foco: #2f6bff;

  /* a cor de cada nível (cartucho, trilha, cabeçalho do nível). Uma tela usa no máximo UMA destas */
  --lv1: #ff6a3d;  /* draw: coral */
  --lv2: #f2b300;  /* move: sol */
  --lv3: #10b38a;  /* touch: menta */
  --lv4: #3b7bff;  /* simulate: céu */
  --lv5: #ec4899;  /* play: rosa */
  --lv6: #6a4bff;  /* boss 3d: violeta */
  --lv: var(--lv1); /* a tela define qual nível está em cena */

  /* o goblin é a única coisa com o verde e o roxo dele: ninguém mais usa */
  --goblin-pele: #7d9a3a;
  --goblin-capa: #4b2a6b;

  /* tipo */
  --f-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Instrument Serif', ui-serif, Georgia, serif;   /* só em momentos: título de herói, nome de nível, fim de lição */
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;  /* XP, números, HUD */
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 18px; --t-xl: 22px; --t-2xl: 28px; --t-3xl: 36px;
  --d-s: 40px; --d-m: 52px; --d-l: 68px; --d-xl: 96px;   /* display (serif) */
  --track-ui: -0.011em; --track-head: -0.02em; --word: 0.04em;   /* nunca colar palavra: word-spacing positivo sempre */

  /* espaço (grade de 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s14: 56px; --s18: 72px;
  --gutter: 20px;          /* margem lateral no celular */

  /* forma */
  --r-chip: 12px; --r-btn: 16px; --r-card: 22px; --r-sheet: 28px;
  --edge: 0 3px 0 0 rgba(20,20,22,.9);                   /* borda de baixo do botão neutro: a profundidade de apertar */
  --edge-ok: 0 3px 0 0 #0b6b35;
  --sombra-1: 0 1px 2px rgba(20,20,22,.06), 0 2px 8px rgba(20,20,22,.04);
  --sombra-2: 0 2px 6px rgba(20,20,22,.06), 0 12px 32px rgba(20,20,22,.08);
  --sombra-3: 0 8px 24px rgba(20,20,22,.10), 0 32px 80px rgba(20,20,22,.14);

  /* movimento */
  --m-tap: 90ms; --m-rapido: 160ms; --m-medio: 260ms; --m-lento: 420ms; --m-cena: 650ms;
  --e-saida: cubic-bezier(.2,.8,.2,1);      /* o padrão: entra rápido, assenta devagar */
  --e-entra: cubic-bezier(.4,0,1,1);
  --e-mola: cubic-bezier(.34,1.56,.64,1);   /* pop de peça, joinha, XP */
  --stagger: 70ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-tap: 0ms; --m-rapido: 0ms; --m-medio: 0ms; --m-lento: 0ms; --m-cena: 0ms; --stagger: 0ms; }
}

/* base comum */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--f-ui); color: var(--ink); background: var(--paper); letter-spacing: var(--track-ui); word-spacing: var(--word);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11'; }
h1, h2, h3, .t-head { letter-spacing: var(--track-head); word-spacing: var(--word); text-wrap: balance; }
p { text-wrap: pretty; }
.t-display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; word-spacing: 0.02em; line-height: 1.02; }
.t-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; word-spacing: 0; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }

/* o botão: grafite com a borda de apertar; o de acerto é verde; o secundário é papel */
.btn { appearance: none; border: 0; font: 600 var(--t-l)/1 var(--f-ui); letter-spacing: -0.005em; min-height: 56px; padding: 0 var(--s6);
  border-radius: var(--r-btn); background: var(--ink); color: #fff; box-shadow: var(--edge); cursor: pointer;
  transition: transform var(--m-tap) var(--e-saida), box-shadow var(--m-tap) var(--e-saida), background var(--m-rapido); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 0 rgba(20,20,22,.9); }
.btn[disabled] { background: var(--sunk); color: #a8a49d; box-shadow: none; cursor: default; }
.btn.ok { background: var(--ok); box-shadow: var(--edge-ok); }
.btn.ok:active { box-shadow: 0 0 0 0 #0b6b35; }
.btn.papel { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 3px 0 0 var(--line-2); }
.btn.papel:active { box-shadow: inset 0 0 0 1.5px var(--line-2); }