/* ===========================================================================
   tokens.css — minimal calmo / editorial (fonte: docs/design.md)
   Paleta quente e arejada, 1 accent sóbrio (verde musgo), sombras leves.
   Tema claro = padrão (:root). Tema escuro sereno = [data-theme="dark"].
   =========================================================================== */

:root {
  /* base clara (papel quente) */
  --bg: #FBFAF8;
  --surface: #FFFFFF;       /* card */
  --surface-2: #F4F2EE;     /* inputs / superfície sutil */
  --border: rgba(24, 22, 18, .10);
  --border-strong: rgba(24, 22, 18, .18);

  --text: #1B1A18;
  --text-muted: #63605A;    /* secundário com folga de AA (~5.6–6.3:1), ainda nitidamente muted */

  --accent: #4D7C2A;        /* verde musgo (AA ~4.7:1 sobre claro) */
  --accent-weak: rgba(77, 124, 42, .10);
  --accent-ink: #FFFFFF;
  --focus: rgba(77, 124, 42, .9);
  --wash: rgba(77, 124, 42, .07);   /* cor espalhada (wash radial do fundo) */

  --danger: #B42318;
  --success: #0E7C5A;

  /* QR — placa branca + tinta verde escura (mesmos valores nos dois temas) */
  --qr-plate: #FFFFFF;
  --qr-ink: #4D7C2A;
  --qr-ink-2: #3A6320;

  /* forma / elevação (suave) */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(20, 18, 15, .05);
  --shadow-2: 0 8px 24px rgba(20, 18, 15, .07);

  /* espaçamento (base 4/8) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  /* tipografia (rem — respeita a preferência de fonte do usuário; base 16px = 1rem) */
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem;
  --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem;

  /* z-index */
  --z-bg: 0; --z-card-link: 1; --z-card-actions: 2; --z-header: 10; --z-modal: 100;

  /* easing — curvas custom (as nativas são fracas); fonte: animations.dev */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* entradas e feedback */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimento na tela */
}

/* tema escuro — charcoal sereno (sem brilho, contraste suave) */
[data-theme="dark"] {
  --bg: #16181D;
  --surface: #1D2026;
  --surface-2: #23262D;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .18);

  --text: #E9E8E5;
  --text-muted: #9B9892;

  --accent: #8FBF52;        /* verde musgo mais claro p/ ler no charcoal */
  --accent-weak: rgba(143, 191, 82, .16);
  --accent-ink: #0C1A05;
  --focus: rgba(143, 191, 82, .9);
  --wash: rgba(143, 191, 82, .08);

  --danger: #F87171;
  --success: #34D399;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, .40);

  /* QR — placa segue branca nos dois temas (escaneável em qualquer leitor);
     no dark só a moldura é suavizada (ver .qr-plate em components.css) */
}