/* Fredoka (OFL, variável, subconjunto latino): um arquivo cobre os pesos 300 a 700. Versão e licença em assets/fonts/. */
@font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-display: swap;
    font-weight: 300 700;
    src: url("../fonts/fredoka-latin-wght-normal-tp8Uwyw.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base: reset leve, tipografia, formulário, botão, menu, avisos. Só tokens (tokens.css), nenhuma cor literal. */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: 1.45;
    color: var(--color-text);
    background: var(--color-bg);
}
main { max-width: 56rem; margin: 0 auto; padding: var(--space-4); }
h1, h2, h3 { line-height: 1.25; font-family: var(--font-display); }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.spacer { flex: 1; }
.inline { display: inline; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* Foco visível em tudo que se opera por teclado ou leitor de tela. */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

nav.menu { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); background: var(--color-nav); }
nav.menu a, nav.menu button { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--color-on-nav); background: none; border: 0; font: inherit; cursor: pointer; text-decoration: underline; }
nav.menu :focus-visible { outline-color: var(--color-on-nav); }

.flash, .notice, .error { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin: var(--space-2) 0; }
.flash-success { background: var(--color-ok-bg); color: var(--color-ok); }
.flash-error, .error { background: var(--color-error-bg); color: var(--color-error); }
.notice { background: var(--color-warn-bg); color: var(--color-warn); }

label { display: block; margin: var(--space-2) 0 var(--space-1); }
input[type=text], input[type=password], input[type=number], input[type=file], select, textarea {
    width: 100%; max-width: 40rem; min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
    font: inherit; color: var(--color-text); background: var(--color-surface);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
textarea { min-height: 6rem; }
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; }

button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--touch-min); padding: var(--space-2) var(--space-4);
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    color: var(--color-text); background: var(--color-surface);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
button:disabled { cursor: default; opacity: .6; }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; box-shadow: var(--shadow-sm); }
.meta { color: var(--color-muted); margin: var(--space-1) 0; }
.big { font-size: 1.5rem; font-weight: 700; font-family: var(--font-display); }
.code { font-size: 4rem; font-weight: 700; letter-spacing: .3rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.code-sm { font-size: 2rem; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }

/* Tema de jogo: botões na fonte display. */
.game button, .game .button { font-family: var(--font-display); }