/* Tokens do protótipo (referencia/prototipo-tarefa-conferida.html) */
:root{
  color-scheme: light;
  --bg:#F4F6F9; --surface:#FFFFFF; --sunk:#EBEEF3; --ink:#1B2233; --muted:#5B6477; --line:#DCE1E8;
  --accent:#2446A8; --accent-ink:#FFFFFF; --accent-soft:#E3E9FA;
  --hi:#F7D54A; --hi-ink:#1B2233;
  --kid1:#0F8A7E; --kid2:#B4376B; --kid3:#7A5AC8;
  --danger:#C62828; --danger-soft:#FBE7E6; --ok:#2E7D32; --ok-soft:#E4F2E5; --warn:#A35F00; --warn-soft:#FDF0DC;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#10141C; --surface:#191F2B; --sunk:#141922; --ink:#E8EBF2; --muted:#9AA3B5; --line:#2B3342;
    --accent:#88A2F2; --accent-ink:#0E1320; --accent-soft:#1F2A47;
    --hi:#D9B933; --hi-ink:#14171F;
    --kid1:#3CC3B3; --kid2:#EB7AA7; --kid3:#A98BF0;
    --danger:#F07167; --danger-soft:#3A1D1E; --ok:#6BCB77; --ok-soft:#1B3020; --warn:#E6AE55; --warn-soft:#382A14;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#10141C; --surface:#191F2B; --sunk:#141922; --ink:#E8EBF2; --muted:#9AA3B5; --line:#2B3342;
  --accent:#88A2F2; --accent-ink:#0E1320; --accent-soft:#1F2A47;
  --hi:#D9B933; --hi-ink:#14171F;
  --kid1:#3CC3B3; --kid2:#EB7AA7; --kid3:#A98BF0;
  --danger:#F07167; --danger-soft:#3A1D1E; --ok:#6BCB77; --ok-soft:#1B3020; --warn:#E6AE55; --warn-soft:#382A14;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.5; }
h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1.15; margin:0 0 .4em; }
.mono{ font-family:var(--mono); }
.muted{ color:var(--muted); }

.centro{ min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.cartao{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 24px; max-width:460px; width:100%; }
.cartao h1{ font-size:clamp(30px, 8vw, 40px); }
.marca{ background:var(--hi); color:var(--hi-ink); padding:0 .2em; border-radius:4px; }
.selo{ display:inline-block; margin:0 0 14px; padding:2px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:13px; }