/* ==========================================================================
   FlowTime Design System - tokens
   Fonte: FlowTime Design System (tokens.json). Nao edite valores soltos nas
   paginas: use estas variaveis. Tema claro e o padrao; o escuro e opt-in via
   <html data-theme="dark">, ligado pelo botao da topbar (ft-ui.js, chave
   localStorage "ft.theme"). Ajustes do legado no escuro: ft-legacy.css secao 22.
   ========================================================================== */

:root {
  /* Superficies */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-sunken: #eef1f4;
  --surface-hover: #f1f4f7;

  /* Bordas */
  --border: #dfe4e9;
  --border-strong: #c6cfd8;
  --border-input: #8a96a3;

  /* Texto */
  --text: #15212c;
  --text-secondary: #465563;
  --text-muted: #66727f;

  /* Primaria */
  --primary: #0b6a95;
  --primary-hover: #095a7f;
  --primary-soft: #e7f1f7;
  --primary-text: #0a5b80;
  --on-primary: #ffffff;
  --focus: #0b6a95;

  /* Semanticas */
  --success: #177a47;
  --success-soft: #e6f4ec;
  --on-success: #ffffff;
  --warning: #945700;
  --warning-soft: #fcf1de;
  --warning-fill: #d48a0a;
  --danger: #b42318;
  --danger-hover: #971c13;
  --danger-soft: #fcebe9;
  --on-danger: #ffffff;
  --info: var(--primary-text);
  --info-soft: var(--primary-soft);

  /* Identidade da construtora (sobrescrita em runtime, so na marca) */
  --brand-tenant: var(--primary);

  /* Camadas */
  --overlay: rgba(13, 20, 25, 0.48);
  --tooltip-bg: #1b2631;
  --tooltip-text: #f3f6f8;
  --skeleton: #e8ecf0;
  --skeleton-shine: rgba(255, 255, 255, 0.65);

  /* Graficos */
  --chart-1: var(--primary);
  --chart-2: #3f8f91;
  --chart-3: #c07d0a;
  --chart-4: #6d63a6;
  --chart-5: #8a96a3;

  /* Tipografia */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Espacos (grade de 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Raios */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* Sombras (so para o que flutua) */
  --shadow-xs: 0 1px 2px rgba(16, 24, 32, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 32, 0.10), 0 2px 4px -2px rgba(16, 24, 32, 0.06);
  --shadow-lg: 0 16px 32px -8px rgba(16, 24, 32, 0.18), 0 4px 8px -4px rgba(16, 24, 32, 0.08);

  /* Medidas */
  --control-sm: 32px;
  --control-md: 36px;
  --control-lg: 44px;
  --topbar: 56px;
  --sidebar: 248px;
  --sidebar-collapsed: 64px;
  --content-max: 1440px;

  /* Camadas (alinhadas ao Bootstrap 3) */
  --z-sticky: 1020;
  --z-dropdown: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1070;
  --z-toast: 1080;
  /* calendarios e autocomplete: acima de qualquer modal/janela, abaixo do loading
     (blockUI usa baseZ 10000: fundo 10000, mensagem 10010) */
  --z-popover: 9000;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1419;
  --surface: #141c23;
  --surface-sunken: #10171d;
  --surface-hover: #1b252e;
  --border: #25313b;
  --border-strong: #34424e;
  --border-input: #5a6875;
  --text: #e5ebf0;
  --text-secondary: #aeb9c3;
  --text-muted: #8894a0;
  --primary: #4aa8d8;
  --primary-hover: #6bb9e2;
  --primary-soft: #10283a;
  --primary-text: #7cc2e6;
  --on-primary: #07141c;
  --focus: #7cc2e6;
  --success: #5ccb94;
  --success-soft: #0f2a1d;
  --on-success: #07140d;
  --warning: #e3a63b;
  --warning-soft: #2e2210;
  --warning-fill: #e3a63b;
  --danger: #f2766b;
  --danger-hover: #f58f86;
  --danger-soft: #3a1614;
  --on-danger: #1a0806;
  --overlay: rgba(0, 0, 0, 0.64);
  --tooltip-bg: #dce3e9;
  --tooltip-text: #121a21;
  --skeleton: #1e2831;
  --skeleton-shine: rgba(255, 255, 255, 0.05);
  --chart-2: #5fc0c2;
  --chart-3: #e3a63b;
  --chart-4: #a59bd9;
  --chart-5: #7d8a97;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
}