/* POPPYS — TOKENS DE TEMA (único sítio com valores de cor, tipo, raio, sombra e movimento).
   Os ecrãs (style.css, insights.css) e os componentes (theme/components.css) só usam var(--…).
   Um layout final substitui ESTE ficheiro (e, se quiser, components.css) sem tocar em app.js nem nas regras.

   Cores oficiais (Branding Book POPPYS): vermelho #C3111A, preto #000000, branco #FFFFFF, amarelo #EFC02E,
   azul #78B7E9. Os tons derivados (pressionado, tinta, cinzentos, estados) NÃO são cores oficiais: são de
   interface e estão marcados como derivados. Tipos oficiais: Fredoka SemiCondensed (títulos), Hanken Grotesk
   (texto), Abuget (script pontual). Hanken Grotesk (texto) é local; Fredoka SemiCondensed e Abuget
   não foram fornecidas: cai-se para Fredoka (local, SIL OFL) — ver docs/T6.md, pendentes. */

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fredoka-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/nunito-sans-latin.woff2') format('woff2');
}

/* ------------------------------------------------------------------ Tokens */
:root {
  /* Oficiais */
  --poppys-red: #C3111A;
  --poppys-black: #000000;
  --poppys-white: #FFFFFF;
  --poppys-yellow: #EFC02E;
  --poppys-blue: #78B7E9;
  /* Derivados (interface) */
  --poppys-red-deep: #9C0D15;   /* pressionado/hover: vermelho oficial escurecido */
  --poppys-halo: #EBEEF1;
  --red: var(--poppys-red);
  --red-deep: var(--poppys-red-deep);
  --red-tint: #FCE8E7;
  --red-text: var(--poppys-red); /* texto vermelho pequeno sobre claro (≈ 6:1) */
  --on-red: var(--poppys-white);
  --white: var(--poppys-white);
  --black: var(--poppys-black);
  --theme-color: var(--poppys-red); /* barra do browser (meta theme-color), lida por theme.js */
  /* Papel do talão (sempre preto sobre branco, também em modo escuro) */
  --paper: var(--poppys-white);
  --paper-ink: var(--poppys-black);
  --paper-line: #E5E5E5;
  --chart-neutral: #8C8C8C;
  /* Gestos e gaveta (T5) */
  --drawer-peek: 0px;
  --gesture-reveal: var(--red);
  --drag-ghost: var(--ink);
  --halo: var(--poppys-halo);
  --bg: #F5F3F1;
  --surface: #FFFFFF;
  --surface-2: #F5F3F1;
  --surface-3: #EBEEF1;
  --ink: #222222;
  --muted: #666666;
  --line: #E4E1DE;
  --line-strong: #CFCBC7;
  --ok: #2E7D4F;  --ok-tint: #E3F2E8;
  --warn: #8A5A0B; --warn-tint: #FDF0D8; --warn-strong: #E0A43A;
  --bad: var(--red); --bad-tint: var(--red-tint);
  --info: #4A5560;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --radius: var(--radius-md);

  --shadow-1: 0 1px 2px rgb(34 34 34 / 0.05), 0 2px 10px rgb(34 34 34 / 0.05);
  --shadow-2: 0 8px 28px rgb(34 34 34 / 0.12);
  --shadow-pop: 0 18px 60px rgb(34 34 34 / 0.28);
  --shadow: var(--shadow-1);
  --ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--red);

  --font-display: 'Fredoka SemiCondensed', 'Fredoka', 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --font-ui: 'Hanken Grotesk', 'Nunito Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --tap: 48px;
  --chrome-h: 104px;
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --ease-out: cubic-bezier(.2, .8, .3, 1);

  /* compatibilidade com estilos anteriores */
  --brand: var(--red);
  --brand-ink: var(--on-red);
  --text: var(--ink);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red-tint: #3A1715; --red-text: #FF7A72; --halo: #2C2C2C;
    --bg: #121212; --surface: #1C1C1C; --surface-2: #262626; --surface-3: #2E2E2E;
    --ink: #F2F2F2; --muted: #ABABAB; --line: #313131; --line-strong: #474747; --theme-color: #141414;
    --ok: #6CCB93; --ok-tint: #17301F; --warn: #F0BD62; --warn-tint: #36290F;
    --info: #B5BEC7;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 8px 28px rgb(0 0 0 / 0.5); --shadow-pop: 0 18px 60px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --red-tint: #3A1715; --red-text: #FF7A72; --halo: #2C2C2C;
  --bg: #121212; --surface: #1C1C1C; --surface-2: #262626; --surface-3: #2E2E2E;
  --ink: #F2F2F2; --muted: #ABABAB; --line: #313131; --line-strong: #474747; --theme-color: #141414;
  --ok: #6CCB93; --ok-tint: #17301F; --warn: #F0BD62; --warn-tint: #36290F;
  --info: #B5BEC7;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 8px 28px rgb(0 0 0 / 0.5); --shadow-pop: 0 18px 60px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}