/* Magistra — sistema SINETE. Gerado de DESIGN.md.
   Nenhuma cor, fonte, medida, raio ou duracao existe fora deste arquivo. */

@font-face{
  font-family:"Fraunces"; src:url("fonte/fraunces.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karla"; src:url("fonte/karla.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* cor — marca */
  --toga:#4A121B; --borgonha:#6E1F2A; --tinta:#17130F;
  --ouro-velho:#7A5C28; --folha:#EDE6E4;
  /* cor — neutros derivados da toga */
  --folha-2:#E2D8D6; --filete:#CDBDBA; --tinta-2:#5A4B47;
  /* cor — derivados sobre a toga (DESIGN.md 2.2.1, story 5.2): a toga é sala,
     não tema — só existem enquanto #licao.toga estiver ativa. Nunca cinza:
     folha em opacidade sobre a toga, nunca preto/branco puro. */
  --folha-70:rgba(237,230,228,.72); --folha-40:rgba(237,230,228,.40);
  /* o véu da folha de baixo (DESIGN.md 2.2.1, emenda 2026-09-28; economia.html#e3; story 2.16) */
  --toga-veu:rgba(74,18,27,.55);

  /* tipografia */
  --f-display:"Fraunces",Georgia,serif;
  --f-corpo:"Karla",system-ui,sans-serif;
  --fv-display:"WONK" 1,"SOFT" 0,"opsz" 144;

  --t-d0:600 64px/1 var(--f-display);   /* SÓ o código do nó na lâmina de "O que cai" (DESIGN 3.3.1) */
  --t-d1:600 40px/1.05 var(--f-display);
  --t-d2:600 28px/1.15 var(--f-display);
  --t-d3:500 20px/1.25 var(--f-display);
  --t-corpo:400 16px/1.55 var(--f-corpo);
  --t-corpo-f:600 16px/1.55 var(--f-corpo);
  --t-apoio:400 14px/1.5 var(--f-corpo);
  --t-rotulo:600 12px/1.2 var(--f-corpo);

  /* espaco */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e5:24px; --e6:32px; --e7:48px; --e8:72px;

  /* raio */
  --r-selo:50%; --r-superficie:6px; --r-controle:8px; --r-marca:2px;
  --r-carta:12px;    /* DESIGN.md 5.1 (emenda 2026-09-28) — a carta de pergaminho da lição */
  --r-folha-baixo:18px;   /* DESIGN.md 5.1 (emenda 2026-09-28), economia.html#e3 — a folha de baixo (story 2.16) */

  /* profundidade — so o sinete */
  --relevo:inset 0 1px 0 rgba(255,255,255,.35),
           inset 0 -1px 0 rgba(23,19,15,.22);

  /* movimento */
  --curva-casa:cubic-bezier(.2,.8,.3,1);
  --t-prensa:180ms cubic-bezier(.2,.8,.3,1);
  --t-assento:120ms var(--curva-casa);
  --t-tela:240ms var(--curva-casa);
  --t-toque:120ms var(--curva-casa);

  /* ── Relevo (R.1, AD-41). SÓ ACRÉSCIMOS: nada acima mudou de valor (FR-82, DESIGN.md 5.1/5.3, emenda de 2026-10-05).
     Fonte: mocks/revamp-3d.html (:root) e mocks/direction-revamp-3d.md §2. Valores compostos copiados sem retoque.
     As peças (style.css, bloco "Relevo — as peças (R.1)") só vestem dentro de um ancestral `.relevo`. ── */

  /* cor nova — a luz e a espessura, todas derivadas da toga */
  --marfim:#FAF6F4;
  --brilho:#FFFDFC;
  --toga-face:#5A1824;
  --toga-flanco:#2E0B11;
  --folha-flanco:#C4B1AD;
  --ouro:#C9983A;   /* ouro de luz: SÓ sobre a toga e no metal; sobre folha dá 2,1:1 e é proibido */
  --sombra:46,11,17;   /* a tripla RGB de --toga-flanco: só existe para rgba(var(--sombra),a); nenhuma sombra é preta */

  /* profundidade — três alturas, e só três */
  --prof-1:4px;
  --prof-2:6px;
  --prof-3:8px;

  /* ambiente (sem flanco: o que não se toca) e cavado */
  --amb-1:0 1px 2px rgba(var(--sombra),.10),0 3px 8px -2px rgba(var(--sombra),.14);
  --amb-2:0 2px 4px rgba(var(--sombra),.06),0 10px 24px -6px rgba(var(--sombra),.20),0 26px 50px -20px rgba(var(--sombra),.24);
  --amb-3:0 -2px 6px rgba(var(--sombra),.08),0 -20px 50px -12px rgba(var(--sombra),.34);
  --cartao:inset 0 1px 0 var(--brilho),var(--amb-2);
  --rebaixo:inset 0 2px 3px rgba(var(--sombra),.20),inset 0 -1px 0 var(--brilho);

  /* peças (com flanco: o que se toca), em repouso e afundadas */
  --peca-clara-1:inset 0 1px 0 var(--brilho),0 4px 0 var(--folha-flanco),0 6px 10px -3px rgba(var(--sombra),.22);
  --peca-clara-1-afunda:inset 0 1px 0 var(--brilho),0 1px 0 var(--folha-flanco),0 1px 3px rgba(var(--sombra),.12);
  --peca-clara-2:inset 0 1px 0 var(--brilho),0 6px 0 var(--folha-flanco),0 10px 16px -5px rgba(var(--sombra),.26);
  --peca-clara-2-afunda:inset 0 1px 0 var(--brilho),0 1px 0 var(--folha-flanco),0 2px 4px rgba(var(--sombra),.14);
  --peca-luz-2:inset 0 1px 0 var(--brilho),0 6px 0 var(--toga-flanco),0 12px 20px -6px rgba(var(--sombra),.6);
  --peca-luz-2-afunda:inset 0 1px 0 var(--brilho),0 1px 0 var(--toga-flanco),0 2px 4px rgba(var(--sombra),.5);
  --peca-toga-2:inset 0 1px 0 rgba(255,253,252,.22),0 6px 0 var(--toga-flanco),0 12px 18px -6px rgba(var(--sombra),.5);
  --peca-toga-2-afunda:inset 0 1px 0 rgba(255,253,252,.14),0 1px 0 var(--toga-flanco),0 2px 4px rgba(var(--sombra),.35);

  /* a luz: gradiente SÓ como luz (mesma matiz, de cima para baixo), nunca como cor de marca */
  --luz-toga:linear-gradient(180deg,#661D2A 0%,var(--toga-face) 48%,#521520 100%);
  --luz-clara:linear-gradient(180deg,var(--brilho) 0%,var(--marfim) 55%,#F4EEEB 100%);
  --luz-sala:radial-gradient(120% 60% at 50% -10%,#5E1824 0%,var(--toga) 60%);

  /* raio — os herdados (12 e 18) ficam até o marco R.10; os do mock entram com o sufixo -relevo */
  --r-letra:7px;
  --r-peca:14px;
  --r-botao:16px;
  --r-carta-relevo:22px;
  --r-folha-baixo-relevo:28px;

  /* tipografia e movimento */
  --t-botao:700 17px/1 var(--f-corpo);
  --t-afunda:70ms cubic-bezier(.4,0,.7,1);
  --t-solta:200ms var(--curva-casa);
  --t-meri:320ms var(--curva-casa);
  --meri-vezes:2;

  /* R.5 — o sinete do fechamento (D9, só acréscimo: nenhum valor herdado muda). O disco com luz de toga (o mock: #701F2D, toga, #3F0F17), o relevo
     FINAL dele (a espessura de 8 px é o `--prof-3`: o objeto mais alto do app) e o reflexo. Só o `.sinete.fechamento` os usa. */
  --luz-sinete:radial-gradient(circle at center 28%,#701F2D 0%,var(--toga) 62%,#3F0F17 100%);
  --relevo-sinete:inset 0 2px 0 rgba(255,253,252,.24),inset 0 -4px 8px rgba(var(--sombra),.45),0 var(--prof-3) 0 var(--toga-flanco),0 18px 28px -8px rgba(var(--sombra),.55);
  --reflexo-sinete:radial-gradient(closest-side,rgba(255,253,252,.28),transparent);

  /* R.6 — os losangos da Trilha (D8, só acréscimo: nenhum valor herdado muda). Os degradês de 135º do mock (#p-trilha) não têm token (o `--luz-toga` e o
     `--luz-clara` são de 180º) e o flanco do losango é DIAGONAL (4,4 girado 45º = 5,7 px para baixo na tela). O meio do degradê é `50.0%`, e não a
     metade inteira: o ⑭ do `testes_trilha.py` está no teto de `50%`. O atual leva anel `toga` de 3 px e flanco de 5 px. */
  --luz-losango:linear-gradient(135deg,#6A1F2B,var(--toga-face) 50.0%,#521520);
  --luz-losango-claro:linear-gradient(135deg,var(--brilho),var(--marfim) 60%,#F2ECE9);
  --losango-selado:inset 1px 1px 0 rgba(255,253,252,.22),4px 4px 0 var(--toga-flanco),9px 9px 14px -5px rgba(var(--sombra),.5);
  --losango-livre:inset 0 0 0 1.5px var(--filete),4px 4px 0 var(--folha-flanco),9px 9px 14px -5px rgba(var(--sombra),.3);
  --losango-atual:inset 0 0 0 3px var(--toga),5px 5px 0 var(--folha-flanco),11px 11px 18px -6px rgba(var(--sombra),.35);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--folha);color:var(--tinta);font:var(--t-corpo);overflow-x:hidden}

h1,h2,h3{font-family:var(--f-display);font-variation-settings:var(--fv-display)}

/* display so em tres tamanhos — DESIGN.md 3.3 */
.d1{font:var(--t-d1);font-variation-settings:var(--fv-display);letter-spacing:-.02em}
.d2{font:var(--t-d2);font-variation-settings:var(--fv-display);letter-spacing:-.015em}
.d3{font:var(--t-d3);font-variation-settings:var(--fv-display);letter-spacing:-.01em}

.rotulo{font:var(--t-rotulo);text-transform:uppercase;letter-spacing:.08em}
.apoio{font:var(--t-apoio);color:var(--tinta-2)}
.num{font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--toga);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}