/* ============================================================
   ZIP · Núcleo de widgets — ponte de tokens + utilitários
   compartilhados pela tríade Finanças / Pomodoro / Estudos.
   Mapeia os nomes locais do redesenho (--ink, --paper, --green…)
   para os tokens reais do app, que já alternam via body.dark-mode.
   ============================================================ */
/* Declarado em `body` (não `:root`) de propósito: o app alterna seus tokens
   via `body.dark-mode`. Aliases que referenciam tokens do app (--bg-base,
   --primary…) precisam ser computados NO elemento body para "enxergar" o
   valor do modo escuro; em `:root` eles travariam no valor claro. */
:root {
  --widget-pad: 20px;   /* padding padrão interno de todos os cards de widget */
}

body {
  --ink:#0D0D0D; --paper:var(--bg-base); --cream:var(--bg-app); --app:var(--bg-app);
  --card:var(--bg-base); --text:var(--text-main); --text2:var(--text-sec);
  --muted:var(--text-sec); --muted2:var(--text-muted); --line:var(--border-color);
  --green:var(--primary); --green-deep:#3F6A00; --lime:#8FD600; --neon:#A3FF12;
  --terra:#C0392B; --terra-soft:rgba(192,57,43,.1); --sunk:rgba(0,0,0,.04);
  /* tons semânticos do sistema de botões (.zbtn) */
  --btn-soft-bg:rgba(90,148,0,.10); --btn-soft-bg-h:rgba(90,148,0,.16);
}
body.dark-mode {
  --green-deep:#cdef7a; --lime:#a3e635; --neon:#B3FF1A;
  --terra:#ff6f60; --terra-soft:rgba(255,111,96,.13); --sunk:rgba(255,255,255,.05);
  --btn-soft-bg:rgba(155,219,31,.14); --btn-soft-bg-h:rgba(155,219,31,.22);
}

/* tipografia utilitária */
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
.svi { display:inline-block; vertical-align:middle; flex-shrink:0; }

/* ícones de marca via máscara → herdam currentColor (claro e escuro) */
.zico { background:currentColor; display:inline-block; }
/* caminho relativo ao arquivo CSS (css/widgets/ → ../../img/icons/) — funciona
   independente da raiz de hospedagem (file://, subpasta, root). */
.ico-finance { -webkit-mask:url('../../img/icons/finance_signal.png') center/contain no-repeat;
               mask:url('../../img/icons/finance_signal.png') center/contain no-repeat; }
.ico-focus   { -webkit-mask:url('../../img/icons/focus_signal.png') center/contain no-repeat;
               mask:url('../../img/icons/focus_signal.png') center/contain no-repeat; }
.ico-study   { -webkit-mask:url('../../img/icons/study_signal.png') center/contain no-repeat;
               mask:url('../../img/icons/study_signal.png') center/contain no-repeat; }

/* selo de seção mono ("label de transmissão") */
.z-ey { font-family:'JetBrains Mono',monospace; font-size:.66rem; font-weight:700; letter-spacing:.14em; color:var(--green); }
.z-chip { font-family:'Outfit',sans-serif; font-size:.72rem; font-weight:700; color:var(--green-deep);
  background:rgba(90,148,0,.1); padding:5px 11px; border-radius:99px; white-space:nowrap; }
body.dark-mode .z-chip { background:rgba(155,219,31,.14); color:var(--green); }

/* badge de ícone padrão de widget — 40×40, radius-md */
.z-widget-badge {
  width: 40px; height: 40px;
  border-radius: var(--radius-md, 12px);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(90,148,0,.12);
}
body.dark-mode .z-widget-badge { background: rgba(155,219,31,.14); }

/* ============================================================
   SISTEMA DE BOTÕES .zbtn — fonte ÚNICA p/ todos os widgets
   Direção: primário = verde sólido da marca · forma = pílula ·
   "Abrir" = secundário tonal. Só tokens da marca (zero menta hardcoded).
   ============================================================ */
.zbtn {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s cubic-bezier(.4,0,.2,1), box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.zbtn:active { transform: translateY(1px); }
.zbtn i { font-size: .92em; }

/* primário — verde sólido da marca */
.zbtn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(77,124,15,.20);
}
.zbtn--primary:hover { filter: brightness(.93); box-shadow: 0 4px 12px rgba(77,124,15,.28); }
body.dark-mode .zbtn--primary { color: #0d0d0d; box-shadow: none; }

/* secundário tonal — "Abrir" e ações leves */
.zbtn--soft {
  background: var(--btn-soft-bg);
  color: var(--primary);
}
.zbtn--soft:hover { background: var(--btn-soft-bg-h); }

/* tinta/escuro — Desbloquear e ações premium */
.zbtn--ink {
  background: var(--text-main);
  color: var(--bg-card);
}
.zbtn--ink:hover { box-shadow: 0 4px 12px rgba(0,0,0,.18); }

/* fantasma — terciário (cancelar etc.) */
.zbtn--ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-sec);
}
.zbtn--ghost:hover { border-color: var(--primary); color: var(--primary); }

/* tamanhos / largura */
.zbtn--sm { padding: 7px 12px; font-size: .78rem; gap: 6px; }
.zbtn--block { width: 100%; }

/* botão de ícone (círculo utilitário): expandir, gcal, paleta, +… */
.zbtn-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  background: var(--bg-app);
  color: #9ca3af;
  font-size: .95rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s cubic-bezier(.4,0,.2,1), background .15s ease, color .15s ease, border-color .15s ease;
}
body.dark-mode .zbtn-icon { border-color: rgba(255,255,255,.1); color: #64748b; }
.zbtn-icon:hover { background: var(--btn-soft-bg); color: var(--primary); border-color: transparent; }
.zbtn-icon:active { transform: translateY(1px); }
.zbtn-icon--sm { width: 32px; height: 32px; font-size: .85rem; }
.zbtn-icon--primary { background: var(--primary); color: #fff; border-color: transparent; }
.zbtn-icon--primary:hover { filter: brightness(.93); }
body.dark-mode .zbtn-icon--primary { color: #0d0d0d; }

/* compat: rede de segurança caso reste algum .z-ink-btn antigo → pílula primária */
.z-ink-btn {
  font-family:'Outfit',sans-serif; font-weight:700; font-size:.85rem;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  background:var(--primary); color:#fff;
  transition:transform .12s cubic-bezier(.4,0,.2,1), background .15s ease;
}
.z-ink-btn:active { transform: translateY(1px); }
body.dark-mode .z-ink-btn { color:#0d0d0d; }

/* ============================================================
   v7 "QUIET PREMIUM" — refinamento Apple-minimal do núcleo
   (mantido no fim do arquivo para vencer a cascata local)
   ============================================================ */
/* botões: peso e escala contidos */
.zbtn,
.z-ink-btn {
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: -0.01em;
  padding: 9px 15px;
}
.zbtn--sm { padding: 7px 12px; font-size: .74rem; }
.zbtn--primary { box-shadow: none; }
.zbtn--primary:hover { box-shadow: 0 3px 10px rgba(77,124,15,.22); }

/* badge de ícone: menor e mais discreto */
.z-widget-badge {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: rgba(90,148,0,.09);
}
body.dark-mode .z-widget-badge { background: rgba(155,219,31,.11); }
.z-widget-badge i { font-size: .9rem; }

/* eyebrow de seção: uppercase discreto no lugar do mono "techy" */
.z-ey {
  font-family: 'Inter', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.z-chip { font-weight: 600; font-size: .68rem; }

/* botão-ícone circular: hairline do sistema */
.zbtn-icon {
  border-color: var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
}
body.dark-mode .zbtn-icon { border-color: var(--border-color); }