/* ============================================================
   CreDrive — Design Tokens Oficiais (TEMA CLARO / LIMPO)
   Base de marca: Manual de Identidade v1.0.1 (verde neon #93F94E).
   DIVERGÊNCIA INTENCIONAL do manual: o manual especifica canvas
   PRETO (dark-first). Por decisão de produto, a plataforma usa
   canvas CLARO (menos fadiga em uso prolongado). A MARCA é
   preservada: o Verde Neon segue como única cor de destaque e a
   regra WCAG "texto sobre verde = preto" continua obrigatória.
   ============================================================ */

:root {
  /* ---------- Marca (imutável) ---------- */
  --cd-brand-primary: #93F94E;         /* Verde Neon oficial — CTAs, sucesso, realces */
  /* Verde legível como TEXTO/LINK sobre fundo claro.
     Mantém o matiz do neon (96°) e passa WCAG AA (>=4.5:1) sobre TODAS as
     superfícies claras: branco 5.27:1, canvas 4.92:1, subtle 4.65:1.
     (O valor anterior, #2FA24A, dava só 3.29:1 no branco — reprovava em AA.) */
  --cd-brand-primary-strong: #3C7A12;
  --cd-brand-black: #000000;           /* Preto Absoluto do manual (texto/logo sobre claro) */
  --cd-brand-white: #FFFFFF;

  /* ---------- Interface: ink + índigo ----------
     DECISÃO DE PRODUTO (substitui "verde neon nos CTAs"): o Verde Neon é aceso
     demais para uso prolongado — em botão e em item de menu selecionado ele cansa
     a vista. A interface passa a ser preto/branco com índigo como acento.
     O verde permanece na MARCA (logo) e nos temas do site, não no chrome do CRM.

     Contrastes medidos:
       branco sobre --cd-ink ............ 17.82:1
       --cd-accent sobre branco .......... 4.59:1  (AA para texto/link)
       --cd-ink sobre --cd-accent-soft ... 15.39:1 (texto do item ativo) */
  --cd-ink: #14181D;            /* Botão primário, aba ativa, ênfase máxima */
  --cd-ink-hover: #262C34;
  --cd-accent: #6D68D3;         /* Link, foco, indicador de seleção */
  --cd-accent-hover: #5851CD;
  --cd-accent-soft: #EEEDFA;    /* Fundo tênue do item selecionado */
  --cd-text-on-ink: #FFFFFF;

  /* ---------- Sidebar do CRM (preta, cor nativa da logo) ----------
     O canvas e as superfícies seguem CLAROS; só a sidebar é escura, para a
     logotipo aparecer no contraste para o qual foi desenhada.
       branco sobre --cd-sidebar-bg .......... 19.28:1
       --cd-sidebar-text sobre bg ............. 9.14:1 (item inativo)
       --cd-ink sobre branco (item ativo) .... 17.82:1 */
  --cd-sidebar-bg: #0A0C0E;
  --cd-sidebar-raised: rgba(255, 255, 255, .07);
  --cd-sidebar-border: rgba(255, 255, 255, .10);
  --cd-sidebar-text: #C2C8D0;
  --cd-sidebar-muted: #838C98;

  /* ---------- Superfícies (CLARO) ---------- */
  --cd-bg-canvas:  #F6F7F9;  /* Fundo geral das telas */
  --cd-bg-surface: #FFFFFF;  /* Cards, modais, menus suspensos */
  --cd-bg-subtle:  #EEF1F5;  /* Zebra de tabela, hover de linha, chips */
  --cd-border-muted: #E3E7EC;/* Divisórias de grid e bordas de input */

  /* ---------- Texto ---------- */
  --cd-text-primary:   #111418;
  --cd-text-secondary: #5B6472; /* legendas, placeholders, meta */
  --cd-text-on-accent: #000000; /* OBRIGATÓRIO sobre verde neon — nunca branco sobre verde */

  /* ---------- Estados da esteira de crédito (legíveis no claro) ----------
     O manual define approved/pending/rejected para canvas PRETO
     (#93F94E / #FFC107 / #FF4A4A). No tema claro esses valores reprovam
     (ex.: #FFC107 sobre branco = 1.63:1). Os valores abaixo preservam o matiz
     e passam WCAG AA (>=4.5:1) como TEXTO sobre o respectivo fundo tênue. */
  --cd-status-approved: #3A7D0C;    /* 4.67:1 sobre --cd-status-approved-bg */
  --cd-status-pending:  #9E6108;    /* 4.56:1 sobre --cd-status-pending-bg  */
  --cd-status-rejected: #CF2929;    /* 4.51:1 sobre --cd-status-rejected-bg */
  --cd-status-approved-bg: #E9F9EC; /* fundo tênue do badge */
  --cd-status-pending-bg:  #FBF3E2;
  --cd-status-rejected-bg: #FBEAEA;

  /* ---------- Geometria e layout (do manual) ---------- */
  --cd-radius-button: 8px;
  --cd-radius-input:  4px;
  --cd-radius-card:   12px;
  --cd-radius-pill:   999px;
  --cd-spacing-grid:  16px;

  /* ---------- Escala de espaçamento (base 16) ---------- */
  --cd-space-1: 4px;  --cd-space-2: 8px;  --cd-space-3: 12px;
  --cd-space-4: 16px; --cd-space-6: 24px; --cd-space-8: 32px; --cd-space-12: 48px;

  /* ---------- Elevação e foco (claro) ---------- */
  --cd-shadow-sm: 0 1px 2px rgba(16,20,24,.06);
  --cd-shadow-md: 0 6px 20px rgba(16,20,24,.08);
  --cd-focus-ring: 0 0 0 3px rgba(109,104,211,.30); /* anel índigo no foco */

  /* ---------- Tipografia ----------
     O manual de identidade NÃO especifica família tipográfica (verificado no PDF
     v1.0.1 — só cores, geometria e componentes). Portanto a família é decisão de
     produto. `--cd-font-sans` é a fonte de UI da plataforma (CRM e site).
     `--cd-font-display` é a fonte de títulos; cada tema do CMS pode sobrescrevê-la
     (ver design/themes/*.css). Escala tipográfica: design/analise-referencia-institucional.md. */
  --cd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cd-font-display: var(--cd-font-sans);
  --cd-font-weight-regular: 400;
  --cd-font-weight-medium: 500;
  --cd-font-weight-bold: 700;
}

/* ============================================================
   COMPONENTES BASE (tema claro). Reescrever em SCSS/módulos
   conforme a arquitetura, mas mantendo estas regras.
   ============================================================ */

body {
  background: var(--cd-bg-canvas);
  color: var(--cd-text-primary);
  font-family: var(--cd-font-sans);
}

.cd-btn-primary {
  /* Ação principal: quase-preto com texto branco (17.82:1). Substitui o botão
     verde neon, que cansava a vista em uso prolongado. */
  background: var(--cd-ink);
  color: var(--cd-text-on-ink);
  font-weight: var(--cd-font-weight-bold);   /* 700 */
  border: 0;
  border-radius: var(--cd-radius-button);    /* 8px */
  padding: var(--cd-space-3) var(--cd-space-6);
  box-shadow: var(--cd-shadow-sm);           /* leve elevação p/ destacar no claro */
  cursor: pointer;
  transition: box-shadow .18s ease, filter .18s ease;
}
.cd-btn-primary:hover { background: var(--cd-ink-hover); box-shadow: var(--cd-shadow-md); }

.cd-btn-secondary {
  background: var(--cd-bg-surface);
  color: var(--cd-text-primary);
  border: 1px solid var(--cd-border-muted);
  border-radius: var(--cd-radius-button);
  padding: var(--cd-space-3) var(--cd-space-6);
  cursor: pointer;
}
.cd-btn-secondary:hover { background: var(--cd-bg-subtle); }

/* Link: índigo (4.59:1 sobre branco). */
.cd-link-accent { color: var(--cd-accent); font-weight: 600; }
.cd-link-accent:hover { color: var(--cd-accent-hover); }

.cd-card {
  background: var(--cd-bg-surface);
  border: 1px solid var(--cd-border-muted);
  border-radius: var(--cd-radius-card);
  box-shadow: var(--cd-shadow-sm);
}

.cd-input {
  background: var(--cd-bg-surface);
  border: 1px solid var(--cd-border-muted);
  border-radius: var(--cd-radius-input);   /* 4px */
  color: var(--cd-text-primary);
  padding: var(--cd-space-3);
}
.cd-input::placeholder { color: var(--cd-text-secondary); }
.cd-input:focus {
  outline: none;
  border-color: var(--cd-accent);
  box-shadow: var(--cd-focus-ring);        /* anel índigo suave */
}

/* Badges de status: fundo tênue + texto legível (não usa verde neon puro como fundo aqui) */
.cd-badge-approved { background: var(--cd-status-approved-bg); color: var(--cd-status-approved); }
.cd-badge-pending  { background: var(--cd-status-pending-bg);  color: var(--cd-status-pending); }
.cd-badge-rejected { background: var(--cd-status-rejected-bg); color: var(--cd-status-rejected); }