/* PW7 Suite — tokens compartilhados (Tailwind v4 @theme + CSS vars puras).
   Base: design-system-pw7 (marca) + Rumo/gestao-pessoal (fluidez Apple).
   Uso Tailwind v4:  @import "tailwindcss"; @import "<caminho>/packages/ui/pw7-tokens.css";
   Sem Tailwind: os tokens abaixo funcionam como var(--color-*) normalmente
   (os servidores sem Tailwind trocam a abertura do bloco de tema por :root ao servir este arquivo; mantenha um só bloco e nunca escreva a abertura dele em comentário).
   Cada app define SÓ o seu acento:  :root { --app-accent: #16A34A; }  e o do escuro em :root[data-theme="dark"].

   TEMA (10/10/2026): o padrão do PW7 OS é o ESCURO. A escolha da pessoa fica no cookie `pw7_tema`
   (light | dark | system) no domínio .pw7os.com, lido por um script no <head> de cada app antes da pintura.
   Documentação completa: packages/ui/TEMA.md */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter Variable", Arial, sans-serif;
  --font-display: "Helvetica Neue", -apple-system, "SF Pro Display", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* marca PW7 */
  --color-brand: #0951c7;
  --color-brand-2: #1a6ae8;
  --color-ai: #5b8def;          /* azul IA PW7 */
  --color-ai-rim: #b9d0ff;      /* brilho/halo da IA */

  /* neutros (Rumo, estilo Apple) — tema claro */
  --color-ink: #0a0a0b;
  --color-on-ink: #ffffff;
  --color-ink-2: #40454f;
  --color-mute: #6e6e73;
  --color-faint: #9aa1ad;
  --color-line: #e8e8ed;
  --color-line-strong: #d2d2d8;
  --color-hair: rgba(0, 0, 0, 0.06);
  --color-fill: #f5f5f7;
  --color-fill-2: #ededf0;
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;   /* elevado: menus, popovers, modais */
  --color-side: #fbfbfd;

  /* estados */
  --color-pos: #0cce6b;
  --color-neg: #e5484d;
  --color-warn: #c93400;
  --color-info: #0a84ff;

  /* gráficos (séries em ordem; 1 = marca) */
  --color-chart-1: #0951c7;
  --color-chart-2: #0cce6b;
  --color-chart-3: #f59e0b;
  --color-chart-4: #8b5cf6;
  --color-chart-5: #ef4444;
  --color-chart-6: #06b6d4;
  --color-chart-7: #ec4899;
  --color-chart-8: #84cc16;

  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl2: 22px;

  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

:root {
  --app-accent: var(--color-brand);
  --glass: rgba(255, 255, 255, 0.72);
  --ai-gradient: linear-gradient(135deg, #0951c7 0%, #5b8def 55%, #b9d0ff 100%);
  /* fundos suaves de estado (selos, avisos) — seguem o tema sozinhos */
  --color-pos-soft: color-mix(in srgb, var(--color-pos) 14%, transparent);
  --color-neg-soft: color-mix(in srgb, var(--color-neg) 14%, transparent);
  --color-warn-soft: color-mix(in srgb, var(--color-warn) 14%, transparent);
  --color-info-soft: color-mix(in srgb, var(--color-info) 14%, transparent);
  --accent-soft: color-mix(in srgb, var(--app-accent) 14%, transparent);
  --scrim: rgba(0, 0, 0, 0.32);
  color-scheme: light;
}

/* ESCURO (padrão) — grafite levemente azulado, nunca preto puro. 4 níveis:
   canvas (fundo) < side (barra lateral) < surface (cartões) < surface-2 (menus/modais).
   Contraste sobre o canvas: ink 16.8 · ink-2 11.5 · mute 6.2 · faint 3.9 · brand-2 7.3 (AA). */
:root[data-theme="dark"] {
  --color-brand: #2f6feb;       /* botões: branco sobre ele 4.6:1 */
  --color-brand-2: #6e9bff;     /* links e destaques em texto: 7.3:1 */
  --color-ai: #7ea6ff;
  --color-ai-rim: rgba(126, 166, 255, 0.45);

  --color-ink: #eceef2;
  --color-on-ink: #0b0c10;
  --color-ink-2: #c3c7cf;
  --color-mute: #8b919c;
  --color-faint: #6a707b;
  --color-line: #23262e;
  --color-line-strong: #30343d;
  --color-hair: rgba(255, 255, 255, 0.07);
  --color-fill: #1a1d23;
  --color-fill-2: #242830;
  --color-canvas: #0b0c10;
  --color-surface: #13151a;
  --color-surface-2: #191c22;
  --color-side: #0e1014;

  --color-pos: #3dd68c;
  --color-neg: #ff6b6b;
  --color-warn: #f5a524;
  --color-info: #5eb1ff;

  --color-chart-1: #6e9bff;
  --color-chart-2: #3dd68c;
  --color-chart-3: #f5b544;
  --color-chart-4: #a78bfa;
  --color-chart-5: #ff7a7a;
  --color-chart-6: #38d3e8;
  --color-chart-7: #f472b6;
  --color-chart-8: #a3e635;

  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.035), 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --glass: rgba(14, 16, 20, 0.74);
  --ai-gradient: linear-gradient(135deg, #1f5fe0 0%, #5b8def 55%, #a9c4ff 100%);
  --color-pos-soft: color-mix(in srgb, var(--color-pos) 16%, transparent);
  --color-neg-soft: color-mix(in srgb, var(--color-neg) 16%, transparent);
  --color-warn-soft: color-mix(in srgb, var(--color-warn) 16%, transparent);
  --color-info-soft: color-mix(in srgb, var(--color-info) 16%, transparent);
  --accent-soft: color-mix(in srgb, var(--app-accent) 18%, transparent);
  --scrim: rgba(3, 4, 6, 0.62);
  color-scheme: dark;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-sans); letter-spacing: -0.01em; }
::selection { background: color-mix(in srgb, var(--app-accent) 22%, transparent); }
/* foco sempre azul do PW7 OS (PADRAO-UX.md); pedido 116: o mesmo bloco do padrao.css, para os apps que só importam os tokens */
:root {
  --pw7-foco: #0951c7;
  --pw7-anel: color-mix(in srgb, #0951c7 25%, transparent);
  --pw7-foco-teclado: color-mix(in srgb, #0951c7 70%, transparent);
  --pw7-fundo-no-lugar: color-mix(in srgb, var(--color-ink, #0a0a0b) 4%, transparent);
}
:root[data-theme="dark"] {
  --pw7-foco: #3574f0;
  --pw7-anel: color-mix(in srgb, #3574f0 40%, transparent);
  --pw7-foco-teclado: color-mix(in srgb, #5b8ff5 85%, transparent);
  --pw7-fundo-no-lugar: color-mix(in srgb, #ffffff 6%, transparent);
}
/* ------------------------------------------------------------------ foco (pedido 116: sem a borda azul do navegador)
   Campo de texto: a própria borda vira azul + anel suave (2px, #0951C7 a 25%) que segue o arredondamento. Nunca o
   contorno do navegador (era um retângulo reto, inclusive no clique: em campo de texto o :focus-visible vale também
   para o mouse). Edição no lugar (título e descrição): classe .pw7-no-lugar, só um fundo leve.
   Botões, links e o resto: contorno só no teclado (:focus-visible), arredondado (segue o border-radius), azul a 70%
   para quem navega pelo teclado enxergar onde está. Especificidade zero (:where): o CSS do app continua mandando. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="color"], [type="file"], [type="image"]), textarea, select, [contenteditable="true"]):focus {
  outline: none;
}
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="color"], [type="file"], [type="image"]), textarea, select):focus {
  border-color: var(--pw7-foco);
  box-shadow: 0 0 0 2px var(--pw7-anel);
}
:where(a, button, summary, [tabindex]:not(input, textarea, select), input[type="checkbox"], input[type="radio"], input[type="range"], input[type="button"], input[type="submit"], input[type="file"]):focus-visible {
  outline: 2px solid var(--pw7-foco-teclado);
  outline-offset: 2px;
}
:where(.pw7-no-lugar):focus, :where([contenteditable="true"]):focus {
  border-color: transparent;
  box-shadow: none;
  background: var(--pw7-fundo-no-lugar);
}


/* escuro: barras de rolagem discretas e campos nativos coerentes */
:root[data-theme="dark"] { scrollbar-color: #30343d transparent; }
:root[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--app-accent) 38%, transparent); color: #fff; }
:root[data-theme="dark"] :focus-visible { outline-color: #6e9bff; }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--color-faint); }
:root[data-theme="dark"] img.pw7-logo-tema,
:root[data-theme="dark"] [data-pw7-logo-tema] { filter: invert(1) hue-rotate(180deg) brightness(1.15); }

/* utilitários da marca */
.pw7-glass { background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.pw7-eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-mute); }
.pw7-ai-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: #fff; background: var(--ai-gradient); box-shadow: 0 0 0 1px rgba(185, 208, 255, 0.5), 0 4px 18px rgba(91, 141, 239, 0.35); }
.pw7-ai-glow { box-shadow: 0 0 0 1px var(--color-ai-rim), 0 8px 32px rgba(91, 141, 239, 0.25); }
:root[data-theme="dark"] .pw7-ai-badge { box-shadow: 0 0 0 1px rgba(126, 166, 255, 0.35), 0 4px 22px rgba(47, 111, 235, 0.45); }
:root[data-theme="dark"] .pw7-ai-glow { box-shadow: 0 0 0 1px var(--color-ai-rim), 0 10px 40px rgba(47, 111, 235, 0.28); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }