/* Agenda Pessoal · tokens (Agente H) — SPEC §4.5
   "Papel bom, que lembra por você."
   Ordem de precedência do tema:
     1. html[data-tema="claro"|"escuro"]   (escolha do usuário, Config tema_cor)
     2. prefers-color-scheme               (quando data-tema ausente ou "sistema")
     3. claro                              (padrão)                                  */

/* ---------- Fontes (self-hosted, subconjunto latin: á ã ç õ é ê ó ô ú) ---------- */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/literata-latin-var.woff2') format('woff2-variations'),
       url('../fonts/literata-latin-var.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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2-variations'),
       url('../fonts/inter-latin-var.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;
}

:root {
  /* ---------- Cor · claro ---------- */
  --bg: #FAF9F7;            /* papel morno */
  --surface: #FFFFFF;       /* cartão, campo, folha em edição */
  --text: #1F1E1C;          /* tinta */
  --text-2: #6B675F;        /* texto secundário */
  --text-3: #8A857D;        /* desabilitado, círculo pendente (não usar em texto: 3,7:1) */
  --text-hint: #74706A;     /* placeholder, pílula, dicas: 4,7:1 no fundo e 4,9:1 na superfície */
  --line: #E8E5E0;          /* linhas de 1 px */
  --line-strong: #D6D2CB;   /* borda em foco/hover de cartão */
  --accent: #3655C4;        /* destaque (um só) */
  --accent-ink: #FFFFFF;    /* texto sobre o destaque */
  --accent-tint: rgba(54, 85, 196, .09);
  --accent-tint-2: rgba(54, 85, 196, .16);
  --hover: rgba(31, 30, 28, .045);
  --press: rgba(31, 30, 28, .08);

  /* status: forma + cor, nunca só cor */
  --st-pendente: #8A857D;
  --st-fazendo: var(--accent);
  --st-terceiro: #7A62B0;
  --st-concluido: #3D8A57;
  --late: #B3402A;          /* só a data atrasada */
  --star: #B8860B;          /* ★ cheia */
  --ok: var(--st-concluido);

  /* toast invertido (tinta sobre papel → papel sobre tinta) */
  --toast-bg: #1F1E1C;
  --toast-text: #F3F1EC;
  --toast-action: #A9B8F7;

  --scrim: rgba(23, 22, 21, .28);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---------- Tipografia ---------- */
  --font-literata: 'Literata', Georgia, 'Times New Roman', serif;
  --font-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sistema: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-texto: var(--font-literata);   /* pautas e notas; troca por data-fonte */
  --font-ui: var(--font-sistema);       /* rótulos, botões, navegação (Roboto no Android) */

  --fs-1: 13px;   /* rótulos: pessoa · prazo, cabeçalho de grupo */
  --fs-2: 15px;   /* secundário, abas, botões */
  --fs-3: 17px;   /* texto da pauta (16 no computador) */
  --fs-4: 22px;   /* título da tela */
  --fs-5: 28px;   /* número do cartão de Painel */
  --fs-note: 18px;/* folha livre */
  --lh-text: 1.5;
  --lh-ui: 1.35;
  --w-regular: 400;
  --w-strong: 600;

  /* ---------- Espaço (base 4) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* ---------- Forma ---------- */
  --r-field: 6px;    /* campo, menu, botão */
  --r-card: 10px;    /* cartões */
  --r-round: 999px;  /* só círculo de status, chips e barra */
  --check: 20px;     /* círculo de status visível */
  --tap: 48px;       /* área mínima de toque (SPEC §4.5) */
  --hit: 0px;        /* folga invisível em cima/embaixo de chips (vira 6px no toque) */

  /* ---------- Layout ---------- */
  --col: 680px;      /* coluna de Doc */
  --col-wide: 960px; /* Painéis */
  --side-w: 220px;
  --gutter: 16px;
  --nav-h: 56px;
  --capture-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-fast: 150ms;
  --t-med: 220ms;
  --t-collapse: 600ms;

  color-scheme: light;
}

/* ---------- Escuro: tokens (repetidos nos dois seletores para precedência correta) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #171615;
    --surface: #1F1E1C;
    --text: #ECE9E4;
    --text-2: #9D978E;
    --text-3: #6F6A63;
    --text-hint: #8E887F;
    --line: #2B2926;
    --line-strong: #3A3733;
    --accent: #8DA2F5;
    --accent-ink: #171615;
    --accent-tint: rgba(141, 162, 245, .12);
    --accent-tint-2: rgba(141, 162, 245, .2);
    --hover: rgba(236, 233, 228, .05);
    --press: rgba(236, 233, 228, .09);
    --st-pendente: #6F6A63;
    --st-terceiro: #B3A2E0;
    --st-concluido: #7CC294;
    --late: #F08B74;
    --star: #E0B44C;
    --toast-bg: #ECE9E4;
    --toast-text: #1F1E1C;
    --toast-action: #3655C4;
    --scrim: rgba(0, 0, 0, .45);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, .36), 0 1px 3px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --bg: #171615;
  --surface: #1F1E1C;
  --text: #ECE9E4;
  --text-2: #9D978E;
  --text-3: #6F6A63;
  --text-hint: #8E887F;
  --line: #2B2926;
  --line-strong: #3A3733;
  --accent: #8DA2F5;
  --accent-ink: #171615;
  --accent-tint: rgba(141, 162, 245, .12);
  --accent-tint-2: rgba(141, 162, 245, .2);
  --hover: rgba(236, 233, 228, .05);
  --press: rgba(236, 233, 228, .09);
  --st-pendente: #6F6A63;
  --st-terceiro: #B3A2E0;
  --st-concluido: #7CC294;
  --late: #F08B74;
  --star: #E0B44C;
  --toast-bg: #ECE9E4;
  --toast-text: #1F1E1C;
  --toast-action: #3655C4;
  --scrim: rgba(0, 0, 0, .45);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .36), 0 1px 3px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ---------- Fonte do texto (Config `fonte`) ---------- */
html[data-fonte="literata"] { --font-texto: var(--font-literata); }
html[data-fonte="inter"]    { --font-texto: var(--font-inter); }
html[data-fonte="sistema"]  { --font-texto: var(--font-sistema); }

/* Computador: texto 16 px (SPEC §4.5) */
@media (min-width: 900px) {
  :root { --fs-3: 16px; --fs-note: 17px; }
}

/* Tela de toque: controles com 48 px de alvo (o desenho continua o mesmo) */
@media (pointer: coarse) {
  :root { --hit: 6px; --capture-h: 60px; }
}

/* Reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-collapse: 1ms; }
}