/* ── Prospectfy Design System ─────────────────────────────────────────────
   Camada única de tokens, extraída do que já existia espalhado em
   tokens.css (:root, hue 278), dashboard-foundation.css (#app-shell),
   landing.css (.marketing-shell), theme.css (dark) e .shell ~ dialog.
   Eram cinco paletas concorrentes para a mesma marca; aqui vira uma.

   A direção que sobrevive é a da landing e do painel: neutros na escala da
   Apple, roxo só como estado, profundidade por degrau de fundo e fio de
   borda — sombra fica reservada para o que flutua (dialog, toast, radar).

   Este arquivo NÃO está importado em styles.css. Ele é aditivo: só passa a
   valer quando for incluído (ver docs/design-system.md, "Migração").
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Rampas ─────────────────────────────────────────────────────────── */
  --ds-neutral-0: #FFFFFF;
  --ds-neutral-50: #F5F5F7;
  --ds-neutral-100: #EDEDF0;
  --ds-neutral-200: #E3E3E8;
  --ds-neutral-300: #D2D2D7;
  --ds-neutral-400: #A1A1A6;
  --ds-neutral-500: #86868B;
  --ds-neutral-600: #6E6E73;
  --ds-neutral-900: #1D1D1F;

  --ds-violet-300: oklch(0.72 0.13 286);
  --ds-violet-500: oklch(0.47 0.21 286);
  --ds-violet-600: oklch(0.40 0.19 286);
  --ds-violet-50: #F0ECFD;

  --ds-green-500: oklch(0.50 0.13 151);
  --ds-green-50: #E7F6EE;
  --ds-amber-500: oklch(0.56 0.12 74);
  --ds-amber-50: #FDF2E3;
  --ds-red-500: oklch(0.50 0.17 27);
  --ds-red-50: #FDECEC;

  /* ── Superfícies e texto ────────────────────────────────────────────── */
  --bg: var(--ds-neutral-50);
  --surface: var(--ds-neutral-0);
  --surface-alt: var(--ds-neutral-50);
  --sidebar-bg: var(--ds-neutral-0);
  --input-bg: var(--ds-neutral-0);
  --fg: var(--ds-neutral-900);
  --fg-secondary: var(--ds-neutral-600);
  --fg-tertiary: var(--ds-neutral-500);
  --border: var(--ds-neutral-200);
  --border-light: var(--ds-neutral-100);
  --border-strong: var(--ds-neutral-300);

  /* ── Acento e estados ───────────────────────────────────────────────── */
  --accent: var(--ds-violet-500);
  --accent-hover: var(--ds-violet-600);
  --accent-soft: var(--ds-violet-50);
  --accent-light: var(--ds-violet-300);
  --on-accent: #FFFFFF;
  --accent-fill: var(--accent);
  --accent-fill-hover: var(--accent-hover);
  --green: var(--ds-green-500);
  --green-soft: var(--ds-green-50);
  --orange: var(--ds-amber-500);
  --orange-soft: var(--ds-amber-50);
  --red: var(--ds-red-500);
  --red-soft: var(--ds-red-50);

  /* ── Profundidade — só para o que flutua ────────────────────────────── */
  --shadow-sm: none;
  --shadow-md: 0 12px 34px rgb(29 29 31 / 0.09);
  --shadow-lg: 0 24px 64px rgb(29 29 31 / 0.16);
  --scrim: oklch(0.18 0.035 286 / 0.62);

  /* ── Raio — 6 degraus, não 20 valores literais ──────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Espaço — grade de 4px ──────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Tipografia — 11 tamanhos, 4 pesos de fato carregados ───────────── */
  --font-sans: "Figtree", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 21px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 550;
  --weight-bold: 600;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --tracking-display: -.03em;
  --tracking-body: -.008em;
  --tracking-eyebrow: .08em;

  /* ── Altura de controle — 44px é o alvo de toque no mobile ──────────── */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 44px;

  /* ── Movimento ──────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 140ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;

  /* ── Camadas ────────────────────────────────────────────────────────── */
  --z-nav: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-tour: 70;

  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  color-scheme: light;
}

/* ── Tema escuro ──────────────────────────────────────────────────────────
   Substitui só os tokens. Antes o dark vivia em seletores presos a
   #app-shell, e finance/pipeline/proposals/outreach ficavam claros no
   escuro porque usam cor literal. Aqui vale para o documento inteiro. */
:root[data-app-theme="dark"] {
  --ds-neutral-0: #202022;
  --ds-neutral-50: #28282C;
  --ds-neutral-100: #303035;
  --ds-neutral-200: #38383E;
  --ds-neutral-300: #666670;
  --ds-neutral-400: #86868B;
  --ds-neutral-500: #9B9BA5;
  --ds-neutral-600: #BABAC2;
  --ds-neutral-900: #F5F5F7;

  --ds-violet-500: #B69AFF;
  --ds-violet-600: #CDBBFF;
  --ds-violet-300: #CDBBFF;
  --ds-violet-50: #30263F;
  --ds-green-500: #7EE2B8;
  --ds-green-50: #193D32;
  --ds-amber-500: #F5CD47;
  --ds-amber-50: #3D3522;
  --ds-red-500: #FD9891;
  --ds-red-50: #422B2D;

  --bg: #161618;
  --input-bg: #19191C;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px #0003;
  --shadow-lg: 0 16px 48px #0006;
  --scrim: oklch(0.12 0.02 286 / 0.7);
  color-scheme: dark;
}

/* O roxo claro do dark não sustenta texto branco em cima; o botão primário
   troca para o roxo cheio, que é o que o theme.css já fazia na mão. */
:root[data-app-theme="dark"] {
  --accent-fill: #7142DF;
  --accent-fill-hover: #7C4FE8;
}

/* ── Aliases de compatibilidade ───────────────────────────────────────────
   Nomes que folhas antigas consomem via var() mas que ninguém declarava —
   caíam no fallback literal (ou em nada). Ficam apontando para o token
   certo até as folhas serem migradas. */
:root {
  --text-muted: var(--fg-tertiary);
  --fg-muted: var(--fg-tertiary);
  --text-primary: var(--fg);
  --text-secondary: var(--fg-secondary);
  --bg-card: var(--surface);
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface-alt);
  --border-color: var(--border);
  --app-browser-paper: var(--surface);
  --app-ink: var(--fg);
  --app-canvas: var(--bg);
  --app-paper: var(--surface);
  --app-violet: var(--accent);
  --app-violet-strong: var(--accent-hover);
  --app-lavender: var(--accent-soft);
  --app-whatsapp: var(--green);
  --app-amber: var(--orange);
  --app-danger: var(--red);
}

/* ── Primitivos ───────────────────────────────────────────────────────────
   Prefixo .ds- para conviver com .button/.ticket/.metric existentes sem
   sobrescrevê-los. Cada componente novo usa estes; os antigos migram um
   de cada vez. */

.ds-focus,
:where(.ds-button, .ds-input, .ds-pill, .ds-badge):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.ds-button {
  min-height: var(--control-md);
  padding: 0 var(--sp-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--fg);
  background: var(--surface);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.ds-button:hover { color: var(--accent); border-color: var(--accent); }
.ds-button:disabled { opacity: .46; cursor: not-allowed; }
.ds-button--primary { color: var(--on-accent); background: var(--accent-fill); border-color: var(--accent-fill); }
.ds-button--primary:hover { color: var(--on-accent); background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.ds-button--ghost { color: var(--fg-secondary); background: transparent; border-color: transparent; }
.ds-button--ghost:hover { color: var(--fg); background: var(--surface-alt); border-color: var(--border); }
.ds-button--sm { min-height: var(--control-sm); padding-inline: var(--sp-3); font-size: var(--text-sm); }
.ds-button--lg { min-height: var(--control-lg); padding-inline: var(--sp-6); }

.ds-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-field > span { color: var(--fg-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-field > small { color: var(--fg-tertiary); font-size: var(--text-xs); line-height: 1.4; }
.ds-input {
  width: 100%;
  min-height: var(--control-lg);
  padding: 10px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg);
  background: var(--input-bg);
  font: inherit;
  font-size: var(--text-md);
}
.ds-input::placeholder { color: var(--fg-tertiary); }
.ds-input:hover { border-color: var(--border-strong); }
.ds-input:focus { border-color: var(--accent); }

.ds-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ds-card--flush { padding: 0; overflow: hidden; }
.ds-card--raised { box-shadow: var(--shadow-md); }

.ds-eyebrow {
  margin: 0;
  color: var(--fg-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.ds-title { margin: 2px 0 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.ds-numeral { font-variant-numeric: tabular-nums; letter-spacing: -.028em; }

.ds-pill {
  min-height: var(--control-sm);
  padding: 5px var(--sp-3);
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.ds-pill:hover { color: var(--fg); }
.ds-pill[aria-pressed="true"] { color: var(--surface); background: var(--fg); border-color: var(--fg); }

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-badge--neutral { color: var(--fg-secondary); background: var(--surface-alt); }
.ds-badge--accent { color: var(--accent); background: var(--accent-soft); }
.ds-badge--success { color: var(--green); background: var(--green-soft); }
.ds-badge--warning { color: var(--orange); background: var(--orange-soft); }
.ds-badge--danger { color: var(--red); background: var(--red-soft); }

.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th {
  padding: 10px var(--sp-2);
  color: var(--fg-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.ds-table td { padding: 10px var(--sp-2); border-bottom: 1px solid var(--border-light); }
.ds-table tbody tr:hover { background: var(--surface-alt); }

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: .01ms; --duration-base: .01ms; --duration-slow: .01ms; }
}