:root {
  --amk-color-bg: #ffffff;
  --amk-color-surface: #f7f7f8;
  --amk-color-text: #111317;
  --amk-color-text-muted: #6b7180;
  --amk-color-primary: #2f6df6;
  --amk-color-danger: #e5484d;
  --amk-color-border: #e2e4ea;

  --amk-radius-sm: 8px;
  --amk-radius-md: 14px;
  --amk-radius-lg: 22px;

  --amk-space-1: 4px;
  --amk-space-2: 8px;
  --amk-space-3: 12px;
  --amk-space-4: 16px;
  --amk-space-5: 24px;

  --amk-header-height: 56px;
  --amk-fab-size: 56px;

  --amk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --amk-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.12);

  --amk-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  /* Overlay de "pressionado" (feedback de toque). Escurece no tema claro. */
  --amk-pressed-overlay: rgba(0, 0, 0, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --amk-color-bg: #0e1116;
    --amk-color-surface: #161a22;
    --amk-color-text: #f1f3f8;
    --amk-color-text-muted: #9aa1b1;
    --amk-color-border: #232733;
    /* No escuro, clareia em vez de escurecer (senão o feedback some no fundo). */
    --amk-pressed-overlay: rgba(255, 255, 255, 0.09);
  }
}

/* ===== Reset mobile — deixa a WebView (Capacitor/PWA) com cara de app nativo ===== */

/*
 * Remove o "tap highlight": o retângulo azul/cinza translúcido que o Chromium/WebView
 * pinta sobre qualquer elemento clicável no momento do toque. É a principal diferença
 * visual entre um web app e um app nativo no Android.
 */
* {
  -webkit-tap-highlight-color: transparent;
}

/*
 * Remove o "anel de foco" azul que o WebView desenha (e MANTÉM) ao tocar/clicar um
 * elemento focável (botões, inputs, divs com tabindex). Diferente do tap highlight,
 * ele persiste após o toque — é a "caixa azul que fica sobre o item".
 *
 * Usa :focus-visible para preservar acessibilidade: a navegação por TECLADO ainda
 * mostra o anel; só o foco por toque/mouse é suprimido.
 */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--amk-color-primary);
  outline-offset: 2px;
}

html {
  /* Evita o menu de contexto (copiar/abrir) ao segurar um elemento. Inputs e textos
     selecionáveis reativam via .amk-selectable abaixo. */
  -webkit-touch-callout: none;
  /* Sem realce de seleção de texto acidental ao tocar/arrastar a UI. */
  -webkit-user-select: none;
  user-select: none;
  /* Sem "overscroll glow"/bounce nem pull-to-refresh acidental dentro do app. */
  overscroll-behavior: none;
}

/* Campos de formulário e conteúdo marcado precisam de seleção/edição normal. */
input,
textarea,
select,
[contenteditable],
.amk-selectable {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/*
 * Feedback de toque ("pressed"). Substitui o tap-highlight nativo que removemos:
 * ao pressionar, um overlay sutil tinge o elemento. Aplique a classe em qualquer
 * elemento clicável custom (cards, list items, botões sem estilo próprio).
 * Usa ::after com inset:0 para funcionar sobre qualquer fundo, herdando o raio.
 */
.amk-pressable {
  position: relative;
}
.amk-pressable::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--amk-pressed-overlay);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}
.amk-pressable:active::after {
  opacity: 1;
  transition-duration: 0ms; /* aparece instantâneo ao tocar, some suave ao soltar */
}