/* ===== tokens.css — CSS Custom Properties (Design Tokens) =====
   Importado primeiro em style.css. Todos os valores de cor,
   borda, raio e espaçamento devem referenciar estes tokens.
   ============================================================ */

:root {
  /* ── Tipografia ── */
  --font-sans: "Google Sans Flex", "Ubuntu", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", menlo, consolas, monospace;

  /* ── Espaçamento ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 34px;

  /* ── Border radius (ponytail: alinhar com product register — cards top out at 12-16px) ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ── Sombras ── */
  --shadow-sm: 0 2px 8px rgba(15, 35, 60, 0.05);
  --shadow-md: 0 6px 18px rgba(15, 35, 60, 0.08);
  --shadow-lg: 0 16px 36px rgba(15, 35, 60, 0.16);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-elevated: 0 20px 50px rgba(0, 0, 0, 0.32);

  /* ── Focus ring (ponytail: token semantico para a11y) ── */
  --focus-ring-color: rgba(96, 165, 250, 0.65);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ── Motion (ponytail: ease-out natural, transições fluidas) ── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-smooth: 240ms;
  --transition-fast: all var(--duration-fast) var(--ease-out-quart);
  --transition-base: all var(--duration-base) var(--ease-out-quart);
  --transition-smooth: all var(--duration-smooth) var(--ease-out-quart);

  /* ═══════════════════════════════════════════════════════════
     ALIASES — nomes antigos para compatibilidade retroativa
     (remover após migração completa para tokens semânticos)
     ═══════════════════════════════════════════════════════════ */
  --bg: #071120;
  --panel: rgba(255, 255, 255, 0.07);
  --panel-strong: rgba(255, 255, 255, 0.1);
  --panel-2: rgba(255, 255, 255, 0.04);
  --panel-bg: #1b1f24;
  --app-bg: #151719;
  --conversation-bg: #111b21;
  --border-color: #343941;
  --text-main: #f5f7fb;
  --text-muted: #94a3b8;
  --border: rgba(255, 255, 255, 0.12);
  --border-hover: #4b5563; /* ponytail: hover de card/botao; lift quando um segundo consumer alem de settings aparecer */
  --text: #e5edff;
  --muted: #9fb3d9;
  --blue: #0057ff;
  --blue-dark: #003bba;
  --green: #22c55e;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --warning: #f59e0b;
  --primary: #1764cf;
  --input-bg: #151718;
  --sidebar-bg: #0a1628;
  --button-soft: #1f2937;
  --sector-color: #60a5fa;
  --composer-bg: #151718;
  --action-btn-bg: #2b2f35;
  --skeleton-base: rgba(255, 255, 255, 0.08);
  --skeleton-highlight: rgba(255, 255, 255, 0.16);
  --skeleton-duration: 1.5s;

  /* ── Breakpoints ── */
  --bp-xs: 360px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-shell: 980px;
  --bp-lg: 1024px;

  /* ── Shell dimensions ── */
  --shell-sidebar-w: 64px;
  --side-nav-expanded-w: 212px;
  --duration-sidebar: 140ms;
  --duration-route: 140ms;
  --shell-topbar-h: 78px;
  --shell-bottomnav-h: 58px;
  --shell-bottomnav-h-safe: calc(var(--shell-bottomnav-h) + env(safe-area-inset-bottom, 0px));

  /* ── Shell surfaces (Mesa da Loja) ── */
  --shell-sidebar-bg: #141617;
  --shell-topbar-bg: #151718;
  --shell-rail-border: rgba(255, 255, 255, 0.08);
  --shell-nav-item-h: 42px;
  --shell-nav-hover-bg: #24282d;
  --shell-nav-active: var(--primary, #1764cf);

  /* ── Modal / confirm ── */
  --modal-surface: #202326;
  --modal-border: #3b424c;
  --modal-backdrop: rgba(0, 0, 0, 0.58);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-elevated);
  --modal-width: min(460px, 100%);

  /* ── Touch ── */
  --tap-min: 44px;

  /* ponytail: texto sobre primário — branco em ambos os temas, token evita #fff solto */
  --text-inverse: #fff;
}

/* ── Kanban Pipeline Radar (só #telaKanban) ── */
#telaKanban {
  --kb-bg: #151719;
  --kb-column-bg: #1b1f24;
  --kb-card-bg: #22262c;
  --kb-card-hover: #282d34;
  --kb-stage-pre: #64748b;
  --kb-stage-int: #0d9488; /* teal: OWN-WORLD — azul só em CTA */
  --kb-stage-neg: #d97706;
  --kb-stage-win: #16a34a;
  --kb-stage-loss: #dc2626;
  --kb-card-height: 80px;
  --kb-drawer-w: 380px;
}

body[data-theme="dark"] {
  --panel-bg: #1b1f24;
  --app-bg: #151719;
  --conversation-bg: #111b21;
  --border-color: #343941;
  --text-main: #f5f7fb;
  --text-muted: #94a3b8;
  --composer-bg: #151718;
  --action-btn-bg: #2b2f35;
  --input-bg: #151718;
  --chat-bubble-out-bg: #1e3a5f;
  --chat-bubble-out-border: #2563eb;
  --chat-bubble-out-text: #e2e8f0;
  --chat-bubble-out-author: #93c5fd;
  --chat-bubble-out-time: #93c5fd;
}

/* ── Tema claro ── */
body[data-theme="light"] {
  --bg: #eef4fb;
  --panel: #fff;
  --panel-bg: #fff;
  --app-bg: #e8f0f8;
  --conversation-bg: #f0ede5;
  --border-color: #d5e0ee;
  --text-main: #0c2238;
  --text-muted: #58708d;
  --border: #d6e1ee;
  --text: #102033;
  --muted: #526a88;
  --blue: #075ee8;
  --input-bg: #f8fbff;
  --sidebar-bg: #fff;
  --button-soft: #f3f7fc;
  --sector-color: #2563eb;
  --composer-bg: #fff;
  --action-btn-bg: #e8eef6;
  --chat-bubble-out-bg: #e8f1ff;
  --chat-bubble-out-border: #bfdbfe;
  --chat-bubble-out-text: #0f172a;
  --chat-bubble-out-author: #1d4ed8;
  --chat-bubble-out-time: #3b82f6;
  --border-hover: #b0c4db;
  --shell-sidebar-bg: #fff;
  --shell-topbar-bg: #fff;
  --shell-rail-border: var(--border-color, #d5e0ee);
  --shell-nav-hover-bg: #f1f5f9;
  --shell-nav-active: var(--primary, #1764cf);
  --modal-surface: #fff;
  --modal-border: #d8dee9;
  --modal-backdrop: rgba(15, 23, 42, 0.42);
  --skeleton-base: #e2e8f0;
  --skeleton-highlight: #f8fafc;
  --shadow-card: 0 4px 16px rgba(15, 35, 60, 0.05);
  --shadow-card-hover: 0 8px 24px rgba(15, 35, 60, 0.09);
  --shadow-elevated: 0 16px 36px rgba(15, 35, 60, 0.12);
  /* ponytail: light-surface precisa de focus ring com mais saturacao pra
     contrast 3:1 em paineis brancos. alpha 0.75 sobre --bg #eef4fb resulta
     em ring efetivo de ~#5987e8 (contraste ~3.2:1, passa WCAG AA non-text).
     Add offset maior quando hover state for identico ao rest (a11y: focus
     deve ser distinto visualmente). */
  --focus-ring-color: rgba(7, 94, 232, 0.75);
}

/* ── Shell dimensions — mobile override ── */
@media (max-width: 980px) {
  :root {
    --shell-sidebar-w: 0px;
    --shell-topbar-h: 56px;
  }
}