/*
  Tokens do design system do Nikka (v1, nov/2026): a fonte do visual. O wireframe (prototipos/jornada) continua sendo a fonte
  do fluxo e do layout; os valores daqui saíram dele, com os quase iguais juntados (design/README.md diz o que virou o quê).
  Só tema escuro, paleta "tinta e sakura" (ADR 0010). Movimento da interface até 0,3 s e desligável (docs/kana.md §2), com
  as exceções da ADR 0032 (traços) e da ADR 0036 (o pop e a barrinha da cápsula do pássaro, como no protótipo do N5).
  O movimento do Nikka tem tokens próprios (--nikka-*, ADR 0037), no fim; com "reduzir movimento", os dois param.
  Regra: componente nenhum usa cor, tamanho, raio, sombra ou tempo solto; se faltar, o token entra aqui primeiro.
*/
:root{
  color-scheme:dark;

  /* ── Cor · fundos, do mais fundo ao mais alto ─────────────────────────────── */
  --page:#0d0c12;         /* fora do celular (tela larga) */
  --bg:#15131c;           /* fundo das telas */
  --surface:#201d2a;      /* cards, listas, barra de baixo, folha */
  --surface2:#2a2636;     /* coisa dentro de card: chip, trilha de barra, botão neutro */
  --surface3:#3a3548;     /* selecionado tom sobre tom (segmento, carta do N): junta #3a3548, #3a3446 e #423c56 */
  --scrim:rgba(0,0,0,.55);/* atrás da folha */
  --shine:rgba(255,255,255,.3); /* o brilho fino em cima da barra cheia (o .seg do protótipo do N5 chamava de glint) */

  /* ── Cor · linhas ─────────────────────────────────────────────────────────── */
  --line:#353043;         /* divisória, contorno de card */
  --line-strong:#4d4660;  /* contorno que precisa aparecer sobre --surface2 (卵, cartas de trás): junta #4d4660, #4f4964, #5a5470 */
  --dash:#6a6380;         /* tracejado: balão, "ainda não", placeholder */
  --field:#7a7490;        /* borda de campo de digitar (3,7:1, passa o mínimo de 3:1 de borda) */

  /* ── Cor · texto ──────────────────────────────────────────────────────────── */
  --ink:#ece9f4;          /* texto principal (13:1 no --surface) */
  --muted:#a19cb4;        /* texto de apoio (6,2:1) */
  --unseen:#8a849f;       /* item ainda não visto: apagado, mas legível (4,6:1, AA) */
  --off:#4a4558;          /* desligado (canhoto sem prática); só em coisa desabilitada, nunca em texto que se lê */

  /* ── Cor · marca (roxo 藤): ações e progresso ──────────────────────────────── */
  --brand:#7a47d1;        /* botão principal, barra cheia, selecionado */
  --on-brand:#ffffff;     /* texto no --brand (5,8:1) */
  --brand-light:#b598e7;  /* texto e ícone na cor da marca, ponta da barra, aba atual */
  --brand-pale:#d5c5f1;   /* leitura no card, começo do degradê da barra */

  /* ── Cor · retorno ────────────────────────────────────────────────────────── */
  --ok:#7cd694;           /* acerto: borda, ícone, texto (9,4:1) */
  --ok-tint:color-mix(in srgb,var(--ok) 14%,transparent);  /* fundo do acerto: junta .12 e .16 */
  --bad:#ef5350;          /* erro: borda e fundo; junta #ff5252 (4,7:1) */
  --bad-ink:#ff8a80;      /* erro em texto pequeno (7,2:1) */
  --bad-tint:color-mix(in srgb,var(--bad) 14%,transparent); /* fundo do erro: junta rgba(255,82,82,.16) e rgba(239,83,80,.12) */
  --on-bad:#15131c;       /* texto no botão de apagar: o branco dava 3,5:1 e não passava; o escuro dá 5,3:1 */
  --warn:#ffb74d;         /* atenção: ponto do offline, faixa "pouco", o "tente de novo" do campo ("Typo?"; 10:1) */
  --info:#42a5f5;         /* anel das revisões */
  --info-strong:#1976d2;  /* fundo do número de revisões na barra */
  --on-info:#ffffff;      /* texto no --info-strong (4,6:1) */
  --focus:var(--brand-light); /* anel de foco: o lilás do protótipo do N5 (7,5:1), não o azul (Gustavo, nov/2026; ADR 0036) */

  /* ── Cor · selo e ouro ────────────────────────────────────────────────────── */
  --hanko:#e0322e;        /* borda do carimbo */
  --hanko-ink:#ff6a5c;    /* texto vermelho pequeno do carimbo (5,9:1) */
  --hanko-tint:color-mix(in srgb,var(--hanko) 8%,transparent);
  --gold:#e7b53c;         /* só o 鳳凰 e o Plus */
  --gold-tint:color-mix(in srgb,var(--gold) 12%,transparent); /* fundo do card que vira 鳳凰 (.ccard.good.phx, S4) */

  /* ── Cor · papel (cartão-postal da volta): a única coisa clara do app ─────── */
  --paper:#f3ecdf; --paper-ink:#2a2230; --paper-muted:#5f5568; --paper-line:#b8ab9c;

  /* ── Cor · atividades da casa (anéis e bilhete) ───────────────────────────── */
  --c-rev:var(--info);    /* revisões */
  --c-les:#9a74dc;        /* lições */
  --c-kana:#4db6ac;       /* kana */
  --c-prac:var(--brand-light); /* praticar */
  --c-ok:var(--ok);       /* tudo feito no dia: o bilhete fica verde */
  --ring-food:#e9c46a;    /* anel da comida (carga do dia) */
  --ring-grow:var(--c-les);

  /* ── Cor · tipo do item (o símbolo no card; nenhum no roxo da marca) ───────── */
  --tone-radical:#8ab4f8; /* parte, azul */
  --tone-kanji:#ffcc80;   /* kanji, âmbar */
  --tone-word:#f48fb1;    /* palavra, rosa */
  --tone-kana:var(--c-kana);

  /* ── Cor · estágios-pássaro 卵 雛 若鳥 飛翔 鳳凰 (ADR 0004) ──────────────────── */
  /* roxo acinzentado, para não parecer o roxo dos botões (o do protótipo do N5; Gustavo, nov/2026; ADR 0036) */
  --bird-1:#2c2838;       /* 卵 (--ink em cima: 11,9:1) */
  --bird-2:#3d3663;       /* 雛 (9,2:1) */
  --bird-3:#5e5298;       /* 若鳥 (5,6:1) */
  --bird-4:#a79fd1;       /* 飛翔: claro, com glifo escuro */
  --bird-4-ink:#15131c;   /* glifo no 飛翔 e no 鳳凰 (7,5:1) */
  --bird-5:var(--gold);   /* 鳳凰: o 飛翔 com moldura dourada */

  /* ── Tipo ─────────────────────────────────────────────────────────────────── */
  /* o inglês na fonte do aparelho e só o japonês na Noto Sans JP, como no protótipo do N5 (ADR 0036): com a Noto primeiro
     em tudo, o inglês saía na Yu Gothic no Windows, porque o app não carrega a Noto */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",var(--font);
  --text-xs:12px;         /* menor texto do app; nada abaixo disto. Junta 9 e 13 */
  --text-s:14px;
  --text-m:16px;          /* corpo. Junta 15 */
  --text-ml:18px;         /* destaque de linha (palavra na lista, título do bilhete). Junta 17, 18 e 19 */
  --text-l:22px;          /* título de tela, pergunta do card, número. Junta 20 e 24 */
  --text-xl:28px;         /* título grande. Junta 26, 30 e 32 */
  --text-2xl:40px;        /* número do carimbo. Junta 34 e 40 */
  --text-watermark:58px;  /* kanji-marca-d'água no bilhete */
  /* o símbolo do card pelo número de caracteres (Gustavo, nov/2026): até 4 `--card-glyph`, 5 a 7 `l`, 8 a 10 `m`, mais de 10 `s`.
     É o teto: a palavra que não cabe nos 251 px do card a 390 px encolhe até caber (app/src/study/glyph-layout.ts) */
  /* até 4 caracteres, --card-glyph (84, a letra do cartão do kana; Gigi, nov/2026), nas medidas das peças, abaixo */
  --glyph-l:72px; --glyph-m:56px; --glyph-s:44px;
  --weight-regular:400; --weight-medium:500; --weight-bold:700; --weight-heavy:900;
  --leading-tight:1.15; --leading:1.5;
  --tracking-caps:.08em;  /* rótulo em maiúsculas (eyebrow) */

  /* ── Espaço (grade de 4) ──────────────────────────────────────────────────── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --tap:44px;             /* alvo mínimo de toque */
  --control:52px;         /* altura de linha de lista e de campo; o botão tem --tap, como no protótipo do N5 (ADR 0036) */
  --gutter:var(--space-4);/* margem lateral das telas */
  --nikka-home:211px;     /* altura do Nikka na casa: o centro da cena, nunca pequeno nem no canto (Gustavo, nov/2026); 211 como o wireframe (Gigi, nov/2026; o app ainda usa 196 fixo) */
  --nikka-home-nudge:170px;    /* o Nikka da casa com o lembrete na tela */
  --nikka-home-postcard:112px; /* o Nikka da casa com o postal da volta */
  --bubble-w:240px;       /* largura do balão da casa, sempre a mesma: forma fixa de duas linhas, nada pula quando a frase muda */
  --bubble-h:64px;        /* altura mínima do balão da casa (duas linhas de --text-s) */
  --ticket-w:300px;       /* largura do bilhete da home, sempre a mesma (300 é o menor em que o subtítulo cabe inteiro; Gustavo, nov/2026) */

  /* ── Formas da sessão: os tamanhos do protótipo do N5 (Gustavo, nov/2026: a sessão "exatamente como no n5") ── */
  --study-h:200px;        /* altura mínima do card de estudo, para não pular quando a resposta entra */
  --bar-h:12px;           /* trilha da barra da sessão e da barra do nível */
  --bar-thin:5px;         /* barrinha da cápsula do pássaro, até o próximo pássaro */
  --shine-h:3px;          /* o brilho em cima da barra cheia: 3 px de altura, 3 px abaixo do topo */
  --seal:36px;            /* selo do pássaro na cápsula */
  --birdline-w:300px;     /* largura máxima da cápsula do pássaro */
  --dot:8px;              /* bolinha do tipo do item ("• Kanji") */
  --level-h:26px;         /* as três barrinhas de "Can you read hiragana?" (desenho de 34 × 26) */
  --feedback-h:60px;      /* faixa fixa do retorno entre o card e o campo (cápsula do pássaro, mnemônico), para o card não sair do lugar */
  --feedback-h-kb:32px;   /* a mesma faixa com o teclado aberto */

  /* ── Medidas das peças: as do kana valem para todo o app, kana e cards (Gigi, nov/2026; ADR 0036, atualização) ── */
  --btn-h:var(--control); /* 52 px, a altura do botão (a do wireframe); o alvo mínimo de toque do resto continua --tap (44) */
  --btn-radius:14px; --btn-pad:14px;  /* o texto do botão é --text-m (16) */
  --opt-h:96px; --opt-radius:18px;    /* a opção de escolher, com fundo --surface2 */
  --opt-text:36px;        /* a letra na opção */
  --opt-text-rom:24px;    /* o romaji ou a palavra na opção */
  --card-pct:78%; --card-w:300px; --card-pad:22px; /* o cartão de estudo e o do kana: 78% da tela até 300 px */
  --card-glyph:84px;      /* o símbolo de até 4 caracteres no cartão (os mais longos seguem --glyph-l, -m, -s) */
  --field-radius:14px; --field-pad:14px; --field-text:24px; /* o campo da resposta */
  --text-streak:10px;     /* exceção nomeada ao mínimo de 12 px, só o rótulo "N IN A ROW" (Gigi, nov/2026) */
  --toast-time:2.5s;      /* quanto o aviso fica na tela (Gigi, nov/2026) */
  --shake:6px;            /* quanto o campo anda para cada lado na tremida do "Typo?" (Gigi, nov/2026) */
  --steps-h:8px;          /* os tracinhos das cartas do teste de nível, um por carta */
  --time-h:6px;           /* a barra do tempo da carta do teste de nível */

  /* ── Raio ─────────────────────────────────────────────────────────────────── */
  --radius-xs:8px;        /* célula pequena, item da grade. Junta 6, 8 e 9 */
  --radius-s:12px;        /* chip quadrado, carta do N, campo pequeno. Junta 10, 11, 12 e 14 */
  --radius-m:16px;        /* card, botão, lista */
  --radius-l:22px;        /* folha, cartão do Nikka. Junta 18 */
  --radius-xl:28px;       /* card de estudo */
  --radius-pill:999px;    /* pílula, barra, círculo. As barras usam pílula no lugar de 2, 3, 4, 5 e 6 px */

  /* ── Sombra (no escuro, só o que flutua tem sombra) ───────────────────────── */
  --shadow-float:0 6px 16px rgba(0,0,0,.45);  /* bilhete compacto, cartão-postal. Junta a .35 */
  --glow-brand:0 0 14px color-mix(in srgb,var(--brand) 35%,transparent);  /* aba da casa selecionada */
  --glow-gold:0 0 28px color-mix(in srgb,var(--gold) 30%,transparent);    /* acerto que vira 鳳凰 */
  --ring-focus:0 0 0 3px var(--focus);

  /* ── Movimento: todo efeito carrega informação, até 0,3 s, desligável ─────── */
  --dur-fast:.12s;        /* toque, troca de estado */
  --dur-base:.2s;         /* entrada de retorno (acerto, erro) */
  --dur-max:.3s;          /* teto de qualquer efeito, fora as exceções aprovadas */
  --dur-pop:.5s;          /* exceção (ADR 0036): o pop da cápsula do pássaro, como no protótipo do N5 */
  --dur-fill:.9s;         /* exceção (ADR 0036): a barrinha da cápsula enchendo, para dar tempo de ver o que mudou */
  --dur-stamp:.45s;       /* exceção aprovada (Gigi, nov/2026): a batida do carimbo */
  --dur-stamp-wait:.2s;   /* a espera antes da batida */
  --dur-rise:.55s;        /* exceção aprovada (Gigi, nov/2026): o selo da cápsula pulando para o pássaro novo */
  --dur-rise-wait:.15s;   /* a espera antes do pulo */
  --dur-bar:.35s;         /* exceção aprovada (Gigi, nov/2026): a barra da sessão andando, a do kana */
  --dur-tip:.65s;         /* exceção aprovada (Gigi, nov/2026): o brilho na ponta da barra, a cada acerto (kana) */
  --dur-tip-wait:.2s;
  --dur-arc:.34s;         /* exceção aprovada (Gigi, nov/2026): o arco da letra acendendo no fim do kana */
  --dur-press:.12s;       /* o botão afundando: exceção nomeada, continua com movimento reduzido (Gigi, nov/2026) */
  --dur-stars:.8s;        /* exceção aprovada (Gigi, nov/2026): as estrelinhas do botão de acerto, só no kana */
  --ease:cubic-bezier(.3,.7,.3,1);       /* sai rápido e assenta */
  --ease-pop:cubic-bezier(.3,1.6,.5,1);  /* passa um pouco e volta: carimbo, selo que sobe */

  /* ── Movimento do Nikka (ADR 0037): regras próprias, separadas das da interface ────────────────────────────────
     O teto de 0,3 s vale para a interface; o Nikka não é efeito de retorno, é o personagem vivo. Ele fica parado quase
     sempre e faz um gesto sorteado de vez em quando: cada gesto até 1 s, sem laço, e depois um descanso sorteado.
     Os valores são os de app/src/components/home/nikkaMoves.ts (nov/2026), só nomeados aqui; o código os escreve (a Web
     Animations não lê var(--…)) e o teste nikkaMoves.test.ts confere que os dois batem. Os ângulos e as distâncias de cada gesto são o desenho
     do gesto e ficam no código. */
  --nikka-move-max:1s;      /* teto de cada gesto; nenhum se repete em laço */
  --nikka-first-wait:2s;    /* espera antes do 1º gesto, para a tela assentar */
  --nikka-ease:ease-in-out; /* a curva de quase todos os gestos */
  --nikka-ease-even:linear; /* a tremidinha do ovo e a espiral do tonto: sem acelerar */
  /* os gestos, pela força: os sutis saem 6 vezes mais que os fortes (peso 6, 3 e 1) */
  --nikka-weight-soft:6; --nikka-weight-mid:3; --nikka-weight-big:1;
  --nikka-blink:.16s;       /* sutil · piscar (parado) */
  --nikka-squint:.26s;      /* sutil · apertar os olhos (feliz) */
  --nikka-shiver:.3s;       /* sutil · tremidinha (ovo) */
  --nikka-ruffle:.4s;       /* sutil · ajeitar as asas */
  --nikka-breathe:.5s;      /* sutil · respirar (o único do dormindo) */
  --nikka-wobble:.6s;       /* médio · balançar (ovo) */
  --nikka-tilt:.7s;         /* médio · inclinar a cabeça */
  --nikka-sway:.9s;         /* médio · cambalear (tonto, com a espiral girando) */
  --nikka-hop:.5s;          /* forte · pulinho */
  --nikka-flap:.7s;         /* forte · bater as asas, duas batidas */
  --nikka-dance:1s;         /* forte · dancinha (só feliz) */
  /* o descanso depois de cada gesto, sorteado entre o mínimo e o máximo: quanto mais forte o gesto, mais longo */
  --nikka-rest-soft-min:2.5s; --nikka-rest-soft-max:5.5s;
  --nikka-rest-mid-min:3.5s;  --nikka-rest-mid-max:7s;
  --nikka-rest-big-min:6s;    --nikka-rest-big-max:11s;
}

/* Reduzir movimento (do aparelho ou do ajuste do app, que põe data-motion="off" no <html>): todo efeito vira troca seca,
   e o Nikka fica parado (os gestos valem 0; no app, canMove() de nikkaMoves.ts já não deixa ele se mexer) */
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0s;--dur-base:0s;--dur-max:0s;--dur-pop:0s;--dur-fill:0s;--dur-stamp:0s;--dur-stamp-wait:0s;--dur-rise:0s;--dur-rise-wait:0s;--dur-bar:0s;--dur-tip:0s;--dur-tip-wait:0s;--dur-arc:0s;--dur-stars:0s;
    --nikka-move-max:0s;--nikka-blink:0s;--nikka-squint:0s;--nikka-shiver:0s;--nikka-ruffle:0s;--nikka-breathe:0s;
    --nikka-wobble:0s;--nikka-tilt:0s;--nikka-sway:0s;--nikka-hop:0s;--nikka-flap:0s;--nikka-dance:0s}
}
:root[data-motion="off"]{--dur-fast:0s;--dur-base:0s;--dur-max:0s;--dur-pop:0s;--dur-fill:0s;--dur-stamp:0s;--dur-stamp-wait:0s;--dur-rise:0s;--dur-rise-wait:0s;--dur-bar:0s;--dur-tip:0s;--dur-tip-wait:0s;--dur-arc:0s;--dur-stars:0s;
  --nikka-move-max:0s;--nikka-blink:0s;--nikka-squint:0s;--nikka-shiver:0s;--nikka-ruffle:0s;--nikka-breathe:0s;
  --nikka-wobble:0s;--nikka-tilt:0s;--nikka-sway:0s;--nikka-hop:0s;--nikka-flap:0s;--nikka-dance:0s}