/* ============================================================================
   VISIONTOWER — TOKENS (fonte unica)
   Consolidacao 2026-09-01: este e o UNICO lugar que define token de design.
   Antes havia 4 geracoes convivendo (ds.css -> tokens-v2 -> tokens-newpingo ->
   rebrand.css) com 8 definicoes de --brand-primary e 27 tamanhos de fonte.
   Carregado por ULTIMO em globals.css: o que esta aqui VENCE.

   Regras:
   - Escala historica --text-* mantida por compatibilidade (novo Vision usa
     os papeis --type-* e --vision-type-* abaixo): 3xs 11 · 2xs 12 · xs 13 · sm 14 · md 15 (corpo) · lg 17 · xl 19 ·
     2xl 24 · 3xl 30 · 4xl 36 · 5xl/display 44. Sem meio-pixel.
   - Um cinza so, FRIO (decisao 2026-09-02, referencia Conta Azul): texto
     151922 / 1C2128 / 434B57 / 6B7380; bordas E4E7EC / EEF0F4; canvas F3F4F7;
     superficie FFFFFF. Fonte unica: Figtree.
   - Raio: sm 6 · md 8 · lg 10 · xl 14 · 2xl 18 (= rounded-* do Tailwind). Sombra: sm · md · lg · float.
   - Aliases legados (--ds-*, --cyan, --blue, --sidebar-*...) ficam na secao
     final SO para as classes antigas nao quebrarem. Codigo novo usa os
     nomes canonicos das secoes acima.
   - Modo escuro ativo: papeis proprios no bloco :root[data-theme=dark] abaixo.
     O novo shell mantem a barra grafite neutra nos dois temas.
   ============================================================================ */
:root {
  /* Novo Vision: valores centrais, aplicações por ambiente nos shells oficiais. */
  --type-body: 1rem;
  --type-label: 0.9375rem;
  --type-control: 0.875rem;
  --type-support: 0.875rem;
  --type-meta: 0.75rem;
  --vision-type-financial-value: 1.625rem;
  --vision-type-financial-value-notebook: 1.5625rem;
  --vision-type-financial-value-mobile: 1.4375rem;
  --vision-type-page: 1.8125rem;
  --vision-type-value: 1.5rem;
  --vision-frame-max: 100%;
  --vision-page-gutter: 18px;
  --vision-topo-financeiro-tablet: 152px;
  --vision-topo-financeiro-mobile: 136px;
  --vision-nav-surface: oklch(20% 0 0);
  --vision-nav-top: oklch(25% 0 0);
  --vision-glass-tint: oklch(75% 0.14 45 / 0.045);
  --vision-glass-reflection: oklch(99.5% 0.002 260 / 0.48);
  --vision-sidebar-width: 248px;
  --vision-sidebar-rail: 76px;
  --vision-glass-fill:
    linear-gradient(
      120deg,
      var(--vision-glass-reflection),
      transparent 44%,
      transparent 68%,
      var(--vision-glass-reflection)
    ),
    linear-gradient(
      120deg,
      var(--vision-glass-tint) 0%,
      color-mix(in srgb, var(--vision-glass-tint) 65%, transparent) 34%,
      color-mix(in srgb, var(--vision-glass-tint) 30%, transparent) 66%,
      var(--vision-glass-tint) 100%
    ),
    var(--vision-glass-surface);
  --vision-chart-grid: oklch(50% 0.008 260 / 0.13);
  --vision-nav-ink: oklch(97% 0.005 75);
  --vision-nav-muted: oklch(81% 0.008 75);
  --vision-nav-border: oklch(98% 0.008 75 / 0.18);
  --vision-glass-surface: oklch(99.5% 0.002 260 / 0.94);
  --vision-glass-border: oklch(99.5% 0.002 260 / 0.94);
  --vision-glass-shadow: oklch(20% 0.018 265 / 0.12);
  --vision-ambient-amber: oklch(78% 0.14 45 / 0.025);
  --vision-ambient-warm: oklch(75% 0.1 30 / 0.015);
  --vision-glyph-top: oklch(44% 0.015 260);
  --vision-glyph-base: oklch(24% 0.015 260);
  --vision-glyph-amber: oklch(70% 0.15 60);
  --vision-sheen: oklch(99% 0.008 75 / 0.48);
  color-scheme: light;

  /* --- Fontes --- */
  --ds-font-body: var(--font-body);
  --ds-font-display: var(--font-display);
  --ds-font-dm-sans: var(--font-dm-sans, "DM Sans"), system-ui, sans-serif;
  --ds-font-inter: var(--font-inter, "Inter"), system-ui, sans-serif;
  --ds-font-inter-tight: var(--font-inter-tight, "Inter Tight"), system-ui, sans-serif;
  --ds-font-red-hat: var(--font-red-hat-display, "Red Hat Display"), system-ui, sans-serif;
  --ds-font-tight:
    var(--font-inter-tight, "Inter Tight"), var(--font-inter, "Inter"), system-ui, sans-serif;
  --ds-font-ubuntu: "Ubuntu", system-ui, sans-serif;
  --ds-fw-bold: 700;
  --ds-fw-medium: 500;
  --ds-fw-regular: 400;
  --ds-fw-semi: 600;
  --ds-lh-normal: 1.5;
  --ds-lh-snug: 1.3;
  --ds-lh-table: 1.4;
  --ds-lh-tight: 1.2;
  --font-body: var(--font-figtree), "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-num: var(--font-body);
  --font-sans: var(--font-body);
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-tight: var(--font-body);
  --font-ui-alt: var(--font-body);
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;
  --fw-semi: 600;
  --lh-normal: 1.5;
  --lh-snug: 1.3;
  --lh-table: 1.4;
  --lh-tight: 1.2;

  /* --- Escala tipografica --- */
  --ds-text-2xl: var(--text-2xl);
  --ds-text-3xl: var(--text-3xl);
  --ds-text-4xl: var(--text-4xl);
  --ds-text-5xl: var(--text-5xl);
  --ds-text-base: var(--text-sm);
  --ds-text-lg: var(--text-lg);
  --ds-text-md: var(--text-md);
  --ds-text-sm: var(--text-xs);
  --ds-text-xl: var(--text-xl);
  --ds-text-xs: var(--text-2xs);
  --text-2xl: 26px;
  --text-3xs: 12px;
  --text-2xs: 13px;
  --text-3xl: 32px;
  --text-4xl: 38px;
  --text-5xl: 46px;
  --text-base: 16px;
  --text-display: 46px;
  --text-lg: 18px;
  --text-md: 16px;
  --text-sm: 15px;
  --text-xl: 20px;
  --text-xs: 14px;

  /* --- Espaco, raio, sombra, camadas, movimento --- */
  --border-radius: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --ds-radius-full: var(--radius-full);
  --ds-radius-lg: var(--radius-lg);
  --ds-radius-md: var(--radius-md);
  --ds-radius-sm: var(--radius-sm);
  --ds-radius-xl: var(--radius-xl);
  --ds-shadow-focus: var(--shadow-focus);
  --ds-shadow-lg: var(--shadow-lg);
  --ds-shadow-md: var(--shadow-md);
  --ds-shadow-sm: var(--shadow-sm);
  --ds-sidebar-flyout-width: 240px;
  --ds-sidebar-rail-width: 64px;
  --ds-space-1: 4px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-z-base: 1;
  --ds-z-dropdown: 500;
  --ds-z-header: 120;
  --ds-z-modal: 1000;
  --ds-z-overlay: 900;
  --ds-z-rail: 100;
  --ds-z-sidebar: 110;
  --ds-z-toast: 1500;
  --ds-z-tooltip: 2000;
  --header-height: 64px;
  --motion-base: 180ms;
  --motion-fast: 150ms;
  --motion-slow: 240ms;
  --radius-2xl: 18px;
  --radius-full: 9999px;
  --radius-lg: 10px;

  /* --- Ilha do topo: elemento `sticky` da PAGINA gruda abaixo dela (ilha termina em 86px + respiro) --- */
  --vt-topo-fixo: 98px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --radius-sm: 6px;
  --radius-xl: 14px;
  --shadow-float: 0 24px 56px rgba(21, 25, 34, 0.14), 0 6px 16px rgba(21, 25, 34, 0.06);
  --shadow-focus: 0 0 0 3px var(--brand-primary-ring);
  --shadow-lg: 0 16px 40px rgba(21, 25, 34, 0.1), 0 4px 10px rgba(21, 25, 34, 0.05);
  --shadow-md: 0 4px 12px rgba(21, 25, 34, 0.06), 0 1px 3px rgba(21, 25, 34, 0.04);
  --shadow-sm: 0 1px 2px rgba(21, 25, 34, 0.04);
  --shadow-stripe: var(--shadow-sm);
  --shadow-stripe-lg: var(--shadow-lg);
  --shadow-stripe-md: var(--shadow-md);
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --space-1: 4px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --z-base: 1;
  --z-dropdown: 500;
  --z-header: 120;
  --z-modal: 1000;
  --z-overlay: 900;
  /* Popover/Select/dropdown de Radix ABERTO por cima de um modal (1100 > 1000).
     Token unico: o tailwind.config le daqui — nunca numero solto na tela. */
  --z-popover: 1100;
  --z-rail: 100;
  --z-sidebar: 110;
  --z-toast: 1500;
  --z-tooltip: 2000;

  /* --- Marca --- */
  --brand-cyan: #4aa3ff;
  --brand-deep: #151922;
  --brand-navy: #1b1917;
  --brand-neon: #ff4a1c;
  --brand-neon-deep: #ef3600;
  --brand-neon-hover: #ff6b35;
  --brand-primary: #ff4a1c;
  --brand-primary-active: #c92e05;
  --brand-primary-hover: #ef3600;
  --brand-primary-ring: rgba(255, 74, 28, 0.22);
  --brand-primary-soft: #fff0ea;
  --color-brand: var(--brand-primary);
  --color-brand-active: var(--brand-primary-active);
  --color-brand-hover: var(--brand-primary-hover);
  --color-brand-ring: var(--brand-primary-ring);
  --color-brand-soft: var(--brand-primary-soft);
  --color-brand-text: var(--brand-primary-active);
  --primary: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --primary-light: var(--brand-primary-soft);

  /* --- Fundo e superficie --- */
  --bg-app: #dfe3e9;
  --bg-app-alt: #eef0f4;
  --bg-card: #ffffff;
  --bg-hover: #f3f4f7;
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f7;
  --bg-sidebar: var(--ds-sidebar-bg);
  --bg-sidebar-active: var(--ds-sidebar-item-active);
  --bg-sidebar-hover: var(--ds-sidebar-item-hover);
  --bg-tertiary: #e9ebf0;
  --color-bg: var(--bg-app);
  --color-bg-alt: var(--bg-app-alt);
  --color-card: var(--surface);
  --color-card-hover: var(--surface-hover);
  --color-card-selected: var(--surface-selected);
  --ds-bg-app: var(--bg-app);
  --ds-bg-app-alt: var(--bg-app-alt);
  --ds-surface: var(--surface);
  --ds-surface-hover: var(--surface-hover);
  --ds-surface-pressed: #e9ebf0;
  --ds-surface-selected: var(--surface-selected);
  --ds-surface-subtle: var(--surface-subtle);
  --color-surface-2: var(--skeleton-base);
  --skeleton-base: #e9ebf0;
  --skeleton-shine: rgba(255, 255, 255, 0.7);
  --surface: #ffffff;
  --surface-hover: #f3f4f7;
  --surface-raised: #ffffff;
  --surface-selected: var(--brand-primary-soft);
  --surface-subtle: #f7f8fa;

  /* --- Texto --- */
  --color-text-dim: var(--text-secondary);
  --color-text-heading: var(--text-heading);
  --color-text-muted: var(--text-tertiary);
  --color-text-on-brand: var(--text-on-brand);
  --color-text-on-dark: var(--text-on-dark);
  --color-text-primary: var(--text-primary);
  --ds-text-disabled: var(--text-disabled);
  --ds-text-heading: var(--text-heading);
  --ds-text-link: var(--color-brand-text);
  --ds-text-on-brand: var(--text-on-brand);
  --ds-text-on-dark: #ffffff;
  --ds-text-primary: var(--text-primary);
  --ds-text-secondary: var(--text-secondary);
  --ds-text-tertiary: var(--text-tertiary);
  --text-disabled: #98a1ad;
  --text-heading: #111418;
  --text-link: var(--color-brand-text);
  --text-muted: #5b6472;
  --text-on-brand: #fffaf6;
  --text-on-dark: #fffaf6;
  --text-primary: #111418;
  --text-secondary: #4b5361;
  --text-sidebar: var(--ds-sidebar-text-muted);
  --text-sidebar-active: var(--ds-sidebar-text);
  --text-tertiary: #666e7c;

  /* --- Borda --- */
  --border: #e7e8ea;
  --border-color: var(--border);
  --border-focus: var(--brand-primary);
  --border-light: #eeeff1;
  --border-strong: #cbced3;
  --border-subtle: #eeeff1;
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-divider: var(--divider);
  --divider: #eef0f4;
  --ds-border: var(--border);
  --ds-border-focus: var(--border-focus);
  --ds-border-strong: var(--border-strong);
  --ds-border-subtle: var(--border-subtle);
  --ds-divider: var(--divider);

  /* --- Semanticas --- */
  --accent-blue: var(--brand-primary);
  --accent-cyan: var(--brand-primary);
  --accent-green: var(--success);
  --accent-orange: var(--brand-primary);
  --accent-purple: var(--brand-primary);
  --accent-red: var(--danger);
  --color-danger: var(--danger);
  --color-danger-600: var(--danger-hover);
  --color-danger-hover: var(--danger-hover);
  --color-danger-soft: var(--danger-soft);
  --color-danger-text: var(--danger-text);
  --color-info: var(--info);
  --color-info-500: var(--info);
  --color-info-hover: var(--info-hover);
  --color-info-soft: var(--info-soft);
  --color-info-text: var(--info-text);
  --color-neutral: var(--neutral);
  --color-neutral-hover: var(--neutral-text);
  --color-neutral-soft: var(--neutral-soft);
  --color-neutral-text: var(--neutral-text);
  --color-success: var(--success);
  --color-success-hover: var(--success-hover);
  --color-success-soft: var(--success-soft);
  --color-success-text: var(--success-text);
  --color-warning: var(--warning);
  --color-warning-hover: var(--warning-hover);
  --color-warning-soft: var(--warning-soft);
  --color-warning-text: var(--warning-text);
  --danger: #d1352b;
  --danger-bg: var(--danger-soft);
  --danger-hover: #b32a22;
  --danger-soft: #fce9e7;
  --danger-text: #a32619;
  --ds-danger: var(--danger);
  --ds-danger-hover: var(--danger-hover);
  --ds-danger-soft: var(--danger-soft);
  --ds-danger-text: var(--danger-text);
  --ds-info: var(--info);
  --ds-info-soft: var(--info-soft);
  --ds-info-text: var(--info-text);
  --ds-success: var(--success);
  --ds-success-hover: var(--success-hover);
  --ds-success-soft: var(--success-soft);
  --ds-success-text: var(--success-text);
  --ds-warning: var(--warning);
  --ds-warning-hover: var(--warning-hover);
  --ds-warning-soft: var(--warning-soft);
  --ds-warning-text: var(--warning-text);
  --info: #4b6a8f;
  --info-bg: var(--info-soft);
  --info-hover: #3c567a;
  --info-soft: #eaf0f7;
  --info-text: #33507a;
  --neutral: #6b7380;
  --neutral-soft: #eef0f4;
  --neutral-text: #434b57;
  /* Marca do WhatsApp (selo e contorno dos avisos de cliente). 3,1:1 sobre
     branco e 5,5:1 sobre o escuro — contraste de grafico nos dois temas. */
  --brand-whatsapp: #1fa855;
  /* Janelinha de aviso (16/10/2026, mockup aprovado): o par de cores de cada
     origem — o vidro e o botao. Iguais nos dois temas e no app do computador. */
  /* 16/10 (2a rodada, mockup "Cores dos avisos"): uma familia so, puxada do
     chamar atencao — equipe = ambar/laranja (o padrao), atendimento externo =
     vermelho, chamar atencao = o padrao com destaque vermelho (--aviso-vermelho). */
  --aviso-cliente: #e8452c;
  --aviso-cliente-2: #cf2a2e;
  --aviso-equipe: #f7931a;
  --aviso-equipe-2: #f26b1d;
  --aviso-atencao: #f7931a;
  --aviso-atencao-2: #f26b1d;
  --aviso-vermelho: #e0352b;
  --success: #22a05a;
  --success-bg: var(--success-soft);
  --success-hover: #1b8a4c;
  --success-soft: #e6f7ec;
  --success-text: #17703d;
  --warning: #d98a0f;
  --warning-bg: var(--warning-soft);
  --warning-hover: #b9750c;
  --warning-soft: #fff4db;
  --warning-text: #8a5a05;

  /* --- Aliases LEGADOS (nao usar em codigo novo) --- */
  --blue: var(--brand-primary);
  --cad-color: var(--brand-primary);
  --cyan: var(--brand-primary);
  --cyan-dark: var(--brand-primary-hover);
  --cyan-glow: var(--brand-primary-ring);
  --cyan-light: var(--brand-primary-soft);
  --cyan-muted: var(--text-tertiary);
  --ds-bank-bb: #ffe500;
  --ds-bank-bb-text: #000000;
  --ds-bank-bradesco: #cc092f;
  --ds-bank-caixa: #003da5;
  --ds-bank-inter: #ff7a00;
  --ds-bank-itau: #ec7000;
  --ds-bank-nubank: #8a05be;
  --ds-bank-original: #ff6900;
  --ds-bank-safra: #005c36;
  --ds-bank-santander: #ec0000;
  --ds-bank-sicoob: #00ae4d;
  --ds-sidebar-bg: #101624;
  --ds-sidebar-bg-flyout: #1b2435;
  --ds-sidebar-bg-section: #1b2435;
  --ds-sidebar-divider: rgba(255, 255, 255, 0.08);
  --ds-sidebar-item-active: rgba(6, 75, 255, 0.18);
  --ds-sidebar-item-active-bar: var(--brand-primary);
  --ds-sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --ds-sidebar-text: #ffffff;
  --ds-sidebar-text-muted: #b0b5b8;
  --estoque-accent: var(--brand-primary);
  --estoque-accent-bg: var(--brand-primary-soft);
  --estoque-entrada: var(--ds-success);
  --estoque-entrada-bg: var(--ds-success-soft);
  --estoque-saida: var(--ds-danger);
  --estoque-saida-bg: var(--ds-danger-soft);
  --estoque-saldo-neg: var(--ds-danger);
  --estoque-saldo-pos: var(--ds-success);
  --glow-brand: linear-gradient(135deg, rgba(255, 74, 28, 0.1), transparent 60%);
  --glow-brand-deep: linear-gradient(135deg, #111113, rgba(255, 74, 28, 0.06));
  --glow-cyan: var(--brand-primary-ring);
  --purple: var(--brand-primary);
  --sidebar-bg: #1b1917;
  --sidebar-bg-section: #141414;
  --sidebar-divider: rgba(255, 255, 255, 0.08);
  --sidebar-item-active: rgba(255, 255, 255, 0.16);
  --sidebar-item-active-bar: var(--brand-primary);
  --sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --sidebar-text: #ffffff;
  --sidebar-text-muted: #98a1ad;
  --violet: var(--brand-primary);

  /* --- adicionados 2026-09-02 --- */
  --font-inter: var(--font-figtree);
  --font-manrope: var(--font-figtree);
  --font-inter-tight: var(--font-figtree);
}

/* celular: a ilha encolhe (padding 8px) e termina em ~60px */
@media (max-width: 767px) {
  :root {
    --vt-topo-fixo: 72px;
  }
}

/* ============================================================================
   MODO ESCURO (2026-09-02) — mesma anatomia, tinta invertida. `:root[...]` tem
   especificidade maior que os blocos [data-theme=dark] antigos dos outros
   arquivos, entao ESTE bloco vence para todo token.
   ============================================================================ */
:root[data-theme="dark"],
:root.dark {
  --vision-glass-tint: oklch(73% 0.1 45 / 0.035);
  --vision-glass-reflection: oklch(90% 0.004 260 / 0.025);
  --vision-glass-surface: oklch(20% 0.006 260 / 0.94);
  --vision-glass-border: oklch(96% 0.01 75 / 0.14);
  --vision-glass-shadow: oklch(10% 0.01 265 / 0.4);
  --vision-glyph-top: oklch(80% 0.014 260);
  --vision-glyph-base: oklch(68% 0.016 260);
  --vision-glyph-amber: oklch(78% 0.15 60);
  color-scheme: dark;
  --bg-app: #0a0c10;
  --bg-app-alt: #171b22;
  --bg-card: #171a21;
  --bg-hover: #20252f;
  --bg-primary: #171a21;
  --bg-secondary: #0f1116;
  --bg-tertiary: #161920;
  --surface: #14171d;
  --surface-raised: #1a1e26;
  --surface-hover: #1e2330;
  --surface-subtle: #171b22;
  --surface-selected: rgba(255, 74, 28, 0.16);
  --ds-surface-pressed: #262b36;
  --border: #262930;
  --border-subtle: #1f232a;
  --border-light: #1f232a;
  --border-strong: #3b3f47;
  --divider: #232833;
  --text-heading: #f2f3f5;
  --text-primary: #eceef2;
  --text-secondary: #aeb5c0;
  --text-tertiary: #8b93a0;
  --text-muted: #8b93a1;
  --text-disabled: #5e6673;
  --text-on-brand: #ffffff;
  --brand-primary-soft: rgba(255, 74, 28, 0.16);
  --brand-primary-ring: rgba(255, 74, 28, 0.35);
  --color-brand-text: #ff8a66;
  --neutral: #8b93a1;
  --neutral-soft: #232833;
  --neutral-text: #b7bdc7;
  --success-soft: rgba(34, 160, 90, 0.18);
  --success-text: #6fd39a;
  --warning-soft: rgba(217, 138, 15, 0.18);
  --warning-text: #f2b65b;
  --danger-soft: rgba(209, 53, 43, 0.2);
  --danger-text: #f0908a;
  --info-soft: rgba(75, 106, 143, 0.24);
  --info-text: #9db8da;
  --skeleton-base: #232833;
  --skeleton-shine: rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 24px 56px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.45);
  --sidebar-bg: #0b0d11;
  --brand-deep: #f4f5f7;

  /* --- pinos: tokens que os blocos dark ANTIGOS redefiniam; aqui ficam no valor
     claro (marca, semanticas, fontes, espacos), so superficie/texto mudam --- */
  --bg-sidebar: var(--ds-sidebar-bg);
  --bg-sidebar-active: var(--ds-sidebar-item-active);
  --bg-sidebar-hover: var(--ds-sidebar-item-hover);
  --blue: var(--brand-primary);
  --border-color: var(--border);
  --brand-navy: #1b1917;
  --brand-primary: #ff4a1c;
  --brand-primary-active: #c92e05;
  --brand-primary-hover: #ef3600;
  --color-bg: var(--bg-app);
  --color-bg-alt: var(--bg-app-alt);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-brand-ring: var(--brand-primary-ring);
  --color-brand-soft: var(--brand-primary-soft);
  --color-card: var(--surface);
  --color-card-hover: var(--surface-hover);
  --color-card-selected: var(--surface-selected);
  --color-danger: var(--danger);
  --color-danger-hover: var(--danger-hover);
  --color-danger-soft: var(--danger-soft);
  --color-danger-text: var(--danger-text);
  --color-divider: var(--divider);
  --color-info: var(--info);
  --color-info-hover: var(--info-hover);
  --color-info-soft: var(--info-soft);
  --color-info-text: var(--info-text);
  --color-neutral: var(--neutral);
  --color-neutral-soft: var(--neutral-soft);
  --color-neutral-text: var(--neutral-text);
  --color-success: var(--success);
  --color-success-hover: var(--success-hover);
  --color-success-soft: var(--success-soft);
  --color-success-text: var(--success-text);
  --color-text-dim: var(--text-secondary);
  --color-text-heading: var(--text-heading);
  --color-text-muted: var(--text-tertiary);
  --color-text-primary: var(--text-primary);
  --color-warning: var(--warning);
  --color-warning-hover: var(--warning-hover);
  --color-warning-soft: var(--warning-soft);
  --color-warning-text: var(--warning-text);
  --cyan: var(--brand-primary);
  --danger: #d1352b;
  --danger-bg: var(--danger-soft);
  --danger-hover: #b32a22;
  --ds-bg-app: var(--bg-app);
  --ds-bg-app-alt: var(--bg-app-alt);
  --ds-border: var(--border);
  --ds-border-strong: var(--border-strong);
  --ds-danger: var(--danger);
  --ds-danger-hover: var(--danger-hover);
  --ds-danger-soft: var(--danger-soft);
  --ds-danger-text: var(--danger-text);
  --ds-divider: var(--divider);
  --ds-info: var(--info);
  --ds-info-soft: var(--info-soft);
  --ds-info-text: var(--info-text);
  --ds-sidebar-bg: #101624;
  --ds-sidebar-item-active: rgba(6, 75, 255, 0.18);
  --ds-sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --ds-sidebar-text: #ffffff;
  --ds-sidebar-text-muted: #b0b5b8;
  --ds-success: var(--success);
  --ds-success-hover: var(--success-hover);
  --ds-success-soft: var(--success-soft);
  --ds-success-text: var(--success-text);
  --ds-surface: var(--surface);
  --ds-surface-hover: var(--surface-hover);
  --ds-surface-selected: var(--surface-selected);
  --ds-surface-subtle: var(--surface-subtle);
  --ds-text-heading: var(--text-heading);
  --ds-text-primary: var(--text-primary);
  --ds-text-secondary: var(--text-secondary);
  --ds-text-tertiary: var(--text-tertiary);
  --ds-warning: var(--warning);
  --ds-warning-hover: var(--warning-hover);
  --ds-warning-soft: var(--warning-soft);
  --ds-warning-text: var(--warning-text);
  --info: #4b6a8f;
  --info-bg: var(--info-soft);
  --info-hover: #3c567a;
  --primary: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --primary-light: var(--brand-primary-soft);
  --purple: var(--brand-primary);
  --shadow-focus: 0 0 0 3px var(--brand-primary-ring);
  --shadow-stripe: var(--shadow-sm);
  --success: #22a05a;
  --success-bg: var(--success-soft);
  --success-hover: #1b8a4c;
  --text-link: var(--color-brand-text);
  --warning: #d98a0f;
  --warning-bg: var(--warning-soft);
  --warning-hover: #b9750c;
}

/* O frame da equipe muda por viewport, nunca por tela ou aba. */
@media (max-width: 1023px) {
  :root {
    --vision-page-gutter: 20px;
  }
}
@media (max-width: 767px) {
  :root {
    --vision-page-gutter: 12px;
  }
}

/* Fidelidade ao mockup completo aprovado (19/10). Somente equipe e seus portais.
   Financeiro mantém os materiais próprios já aprovados, sem herdar esta correção. */
:root:has(:is(.vs-shell[data-ambiente="equipe"], .vision-public-shell, .vision-portal)) {
  --vision-type-opening: 2.0625rem;
  --vision-glass-surface: oklch(99% 0.005 75 / 0.58);
  --vision-glass-border: oklch(99% 0.005 75 / 0.82);
  --vision-glass-inner: oklch(99% 0.005 75 / 0.9);
  --vision-glass-tint: oklch(78% 0.15 60 / 0.13);
  --vision-glass-amber: #f7931a;
  --vision-glass-line: oklch(35% 0.015 260 / 0.1);
  --vision-glass-fill:
    radial-gradient(ellipse 75% 125% at 0% 0%, var(--vision-glass-tint), transparent 62%),
    var(--vision-glass-surface);
  --vision-canvas:
    radial-gradient(ellipse 50% 65% at 6% 35%, oklch(84% 0.12 65 / 0.22), transparent 76%),
    radial-gradient(ellipse 55% 70% at 98% 18%, oklch(80% 0.09 45 / 0.2), transparent 72%),
    radial-gradient(ellipse 50% 60% at 58% 100%, oklch(85% 0.06 80 / 0.23), transparent 74%),
    oklch(94.5% 0.008 260);
  --vision-glyph-top: oklch(56% 0.018 65);
  --vision-glyph-upper: oklch(28% 0.016 260);
  --vision-glyph-mid: oklch(34% 0.02 260);
  --vision-glyph-lower: oklch(22% 0.018 260);
  --vision-glyph-bottom: oklch(63% 0.13 55);
  --vision-glyph-extrusion: oklch(16% 0.015 260 / 0.8);
  --vision-glyph-edge-light: oklch(97% 0.012 70);
  --vision-glyph-edge-amber: oklch(76% 0.16 60);
  --vision-glyph-shine: oklch(99% 0.008 75);
  --vision-glyph-shadow: oklch(18% 0.016 265 / 0.16);
  --vision-button-fill: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-primary) 84%, var(--text-on-brand)) 0%,
    var(--brand-primary) 35%,
    var(--brand-primary-active) 58%,
    var(--brand-primary) 100%
  );
  --vision-button-glint: linear-gradient(
    115deg,
    transparent 43%,
    color-mix(in srgb, var(--text-on-brand) 48%, transparent) 50%,
    transparent 57%
  );
}
:root[data-theme="dark"]:has(
    :is(.vs-shell[data-ambiente="equipe"], .vision-public-shell, .vision-portal)
  ),
:root.dark:has(:is(.vs-shell[data-ambiente="equipe"], .vision-public-shell, .vision-portal)) {
  --vision-glass-surface: oklch(19% 0.013 265 / 0.68);
  --vision-glass-border: oklch(96% 0.01 75 / 0.14);
  --vision-glass-inner: oklch(96% 0.01 75 / 0.2);
  --vision-glass-tint: oklch(72% 0.16 55 / 0.12);
  --vision-glass-line: oklch(85% 0.01 260 / 0.1);
  --vision-canvas:
    radial-gradient(ellipse 70% 95% at 100% 0%, oklch(55% 0.12 50 / 0.2), transparent 75%),
    radial-gradient(ellipse 55% 70% at 0% 100%, oklch(50% 0.1 60 / 0.13), transparent 75%),
    oklch(16% 0.014 265);
  --vision-glyph-top: oklch(78% 0.018 260);
  --vision-glyph-upper: oklch(55% 0.02 260);
  --vision-glyph-mid: oklch(35% 0.02 260);
  --vision-glyph-lower: oklch(41% 0.015 260);
  --vision-glyph-bottom: oklch(68% 0.15 60);
  --vision-glyph-extrusion: oklch(11% 0.01 265 / 0.9);
  --vision-glyph-edge-light: oklch(98% 0.008 75 / 0.85);
  --vision-glyph-edge-amber: oklch(81% 0.15 60);
}

/* Sobreposição neutra para diálogos do kit, inclusive portais. */
:root {
  --overlay: oklch(12% 0.006 265 / 0.5);
}

:root {
  --z-feedback: 3000;
  --z-feedback-overlay: 2999;
}

/* Equipe: a ilha clara sobre o tema escuro volta ao comportamento aprovado.
   Financeiro mantém seu contrato independente. */
:root[data-theme="dark"]:has(.vs-shell[data-ambiente="equipe"]),
:root.dark:has(.vs-shell[data-ambiente="equipe"]) {
  --vision-nav-top: oklch(99% 0.002 260);
  --vision-nav-surface: oklch(95% 0.005 260);
  --vision-nav-ink: oklch(24% 0.014 265);
  --vision-nav-muted: oklch(43% 0.014 265);
  --vision-nav-border: oklch(24% 0.014 265 / 0.16);
}

/* C3 aprovado em 20/10/2026. Papéis canônicos da equipe. */
:root:has(:is(.vs-shell[data-ambiente], .vision-public-shell, .vision-portal)) {
  --vision-icon-face: #242c34;
  --vision-icon-edge: #515e69;
  --vision-icon-shadow: #101922;
  --vision-icon-depth: #596773;
  --vision-row-fill: linear-gradient(115deg, #fcfcfd, #f8fafc 65%, #f9fafb);
  --vision-row-selected: linear-gradient(110deg, #fff0e7, #fffaf6 80%);
  --vision-row-shadow: 0 4px 9px -5px #18253626, inset 0 1px #ffffffc9;
  --vision-floating-shadow: inset 0 1px #ffffffeb, inset 0 0 0 1px #ffc49414, 0 15px 32px -18px #22354b48;
  --vision-glass-surface: #ffffffd9;
  --vision-glass-border: #ffffffeb;
  --vision-glass-inner: #ffffffd9;
  --vision-glass-tint: #ff9a4006;
  --vision-glass-fill: radial-gradient(ellipse at 0 0, #ffbc7208, transparent 64%), linear-gradient(115deg, #ffffffd9, #fafcfee8 65%);
  --vision-glass-line: #22354b17;
  --vision-canvas: radial-gradient(ellipse at 10% 25%, #ffbc720a, transparent 65%), #e9edf2;
  --vision-nav-top: #292d31;
  --vision-nav-surface: #111416;
  --vision-nav-ink: #dce2e8;
  --vision-nav-muted: #a4afba;
  --vision-nav-border: #a6b3c02e;
  --vision-dock-fill: linear-gradient(180deg, #ffffffeb, #f1f4f8e8);
  --vision-dock-ink: #242c34;
  --vision-dock-border: #bdc7d245;
  --vision-button-fill: linear-gradient(
    180deg,
    #ff8e57 0%,
    #ff5b28 30%,
    #ff4b14 52%,
    #d93000 58%,
    #ed4509 100%
  );
  --vision-type-section: 1.0625rem;
  --vision-icon-glint: 0.12;
  --vision-icon-extrusion: 0.3;
  --vision-rail-width: 262px;
  --vision-context-width: 292px;
  --vision-context-rail: 46px;
  --vision-c5-metric-size: 1.4375rem;
  --vision-workspace-gap: 16px;
  --vision-material-blur: 28px;
  --vision-secondary-fill: linear-gradient(180deg, #fcfcfd, #f1f4f8);
  --vision-secondary-shadow: inset 0 1px #ffffffd9, 0 2px 4px -3px #17232f40;
  --vision-selection-fill: linear-gradient(115deg, #ffede0b8, #ffffffad 82%);
  --vision-selection-line: #ee9b6f66;
  --vision-selection-shadow: inset 0 1px #ffffffd9, 0 3px 8px -5px #a8491f40;
  --vision-control-fill: linear-gradient(150deg, #fffffff5, #d6dee852);
  --vision-control-shadow: inset 0 1px #fffffff2, 0 2px 4px -3px #19243166;
  --vision-nav-control-fill: linear-gradient(160deg, #3b4146, #23272b 72%);
  --vision-nav-shadow: inset 0 1px #ffffff30, inset 0 -1px #05070880, 0 12px 24px -13px #0e131b85;
  --vision-icon-active-face: #f65e21;
  --vision-icon-active-edge: #ffbe7e;
  --vision-icon-active-shadow: #c23906;
  --vision-icon-active-amber: #f6bd80;
}
:root[data-theme="dark"]:has(:is(.vs-shell[data-ambiente], .vision-public-shell, .vision-portal)),
:root.dark:has(:is(.vs-shell[data-ambiente], .vision-public-shell, .vision-portal)) {
  --bg-app: #121518;
  --surface: #1c2127;
  --surface-raised: #20262c;
  --surface-hover: #252c33;
  --surface-subtle: #20262c;
  --surface-selected: #2c2c2d;
  --border: #96a5b429;
  --border-strong: #96a5b44d;
  --text-primary: #dce2e8;
  --text-heading: #e2e7ec;
  --text-secondary: #a4afba;
  --text-tertiary: #9aa7b4;
  --text-link: #ff9b69;
  --color-brand-text: #ff9b69;
  --brand-primary-soft: #2c2c2d;
  --vision-icon-face: #9ca8b3;
  --vision-icon-edge: #c1cbd3;
  --vision-icon-shadow: #657480;
  --vision-icon-depth: #303b45;
  --vision-row-fill: linear-gradient(115deg, #272e35, #22292f 65%, #232a31);
  --vision-row-selected: linear-gradient(110deg, #302c2a, #282c33 80%);
  --vision-row-shadow: 0 4px 9px -5px #00000099, inset 0 1px #abc0d209;
  --vision-floating-shadow: inset 0 1px #abc0d21c, inset 0 0 0 1px #abc0d207, 0 15px 32px -18px #05080bd9;
  --vision-glass-surface: #1c2127f5;
  --vision-glass-border: #96a5b436;
  --vision-glass-inner: #abc0d20b;
  --vision-glass-tint: #8da0b409;
  --vision-glass-fill: linear-gradient(115deg, #252c33ed, #1c2127f0 65%);
  --vision-glass-line: #96a5b429;
  --vision-canvas: radial-gradient(ellipse at 45% 0, #5c72890a, transparent 55%), #121518;
  --vision-nav-top: #292d31;
  --vision-nav-surface: #111416;
  --vision-nav-ink: #c4cdd5;
  --vision-nav-muted: #a4afba;
  --vision-nav-border: #a6b3c02e;
  --vision-dock-fill: linear-gradient(180deg, #252b32, #1c2228);
  --vision-dock-ink: #c4cdd5;
  --vision-dock-border: #a6b3c02e;
  --vision-icon-glint: 0.10;
  --vision-icon-extrusion: 0.38;
  --vision-secondary-fill: linear-gradient(180deg, #272e35, #20262c);
  --vision-secondary-shadow: inset 0 1px #abc0d20b, 0 2px 4px -3px #05080b80;
  --vision-selection-fill: linear-gradient(115deg, #37302ae6, #262c33);
  --vision-selection-line: #d696654a;
  --vision-selection-shadow: inset 0 1px #c5b6a71a, 0 3px 8px -5px #00000077;
  --vision-control-fill: linear-gradient(145deg, #343e48, #252d35);
  --vision-control-shadow: inset 0 1px #abc0d213;
  --vision-icon-active-face: #e59058;
  --vision-icon-active-edge: #eaba94;
  --vision-icon-active-shadow: #a7673f;
  --vision-icon-active-amber: #ffd19b;
}