/* ─────────────────────────────────────────────────────────────────────────
   SeguraCRM — Colors & Type
   Drop this into any HTML artifact and use the CSS vars directly.
   Light mode is the default; toggle dark via `data-theme="dark"` on <html>.
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://unpkg.com/@phosphor-icons/web@2/src/regular/style.css');

:root {
  /* ── Fonts ───────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Type tokens (use as `font:` shorthand) ──────────────────────── */
  --text-display: 700 28px/1.2 var(--font-sans);   /* KPI principal, título de página */
  --text-h1:      600 22px/1.3 var(--font-sans);   /* Título de seção maior */
  --text-h2:      600 18px/1.4 var(--font-sans);   /* Título de card, modal header */
  --text-h3:      600 15px/1.4 var(--font-sans);   /* Sub-seção, tab ativo */
  --text-body:    400 14px/1.5 var(--font-sans);   /* Tabela, body */
  --text-body-sm: 400 13px/1.5 var(--font-sans);   /* Labels, tooltips */
  --text-caption: 400 12px/1.4 var(--font-sans);   /* Timestamps, metadados */
  --text-label:   600 11px/1.4 var(--font-sans);   /* Section headers (uppercase) */
  --text-mono:    400 13px/1.5 var(--font-mono);   /* R$, CPF, datas, % */

  /* ── Letter spacing (apply alongside font shorthand when needed) ── */
  --ls-display: -0.02em;
  --ls-h1:      -0.01em;
  --ls-h2:      -0.01em;
  --ls-label:    0.06em;

  /* ── Primitives — neutrals (cool-tinted) ─────────────────────────── */
  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
  --neutral-950: #020617;

  /* ── Primitives — brand (verde — apólice ativa, comissão OK) ─────── */
  --brand-50:  #F0FDF4;
  --brand-100: #DCFCE7;
  --brand-200: #BBF7D0;
  --brand-300: #86EFAC;
  --brand-400: #4ADE80;
  --brand-500: #22C55E;   /* primary */
  --brand-600: #16A34A;
  --brand-700: #15803D;
  --brand-800: #166534;
  --brand-900: #14532D;

  /* ── Primitives — navy (sidebar, autoridade financeira) ──────────── */
  --navy-800: #0D1B35;
  --navy-900: #0A1628;    /* sidebar */
  --navy-950: #060D1F;

  /* ── Primitives — gold (pendente, lucro, atenção) ────────────────── */
  --gold-50:  #FFFBEB;
  --gold-100: #FEF3C7;
  --gold-400: #FBBF24;
  --gold-500: #F59E0B;    /* primary */
  --gold-600: #D97706;

  /* ── Primitives — red (cancelada, inadimplente, sinistro) ────────── */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-900: #7F1D1D;

  /* ── Primitives — orange (vencida, prazo próximo) ────────────────── */
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-500: #F97316;
  --orange-600: #EA580C;

  /* ── Primitives — purple (em renovação, IA, automação) ───────────── */
  --purple-50:  #FAF5FF;
  --purple-100: #F3E8FF;
  --purple-400: #C084FC;
  --purple-500: #A855F7;
  --purple-600: #9333EA;

  /* ── Primitives — sky (informativo, "em renovação" no novo modelo) ─ */
  --sky-50:  #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-700: #0369A1;

  /* ── IA — roxo como assinatura semântica de "feito por IA" ───────── */
  --ai:           #A855F7;
  --ai-hover:     #9333EA;
  --ai-subtle:    #F3E8FF;
  --ai-bg:        #FAF5FF;
  --ai-text:      #7C3AED;
  --ai-ring:      rgba(168,85,247,0.18);

  /* ── Cores por canal de comunicação ──────────────────────────────── */
  --channel-whatsapp:  #25D366;
  --channel-instagram: #E1306C;
  --channel-email:     #3B82F6;
  --channel-blog:      #475569;
  --channel-youtube:   #DC2626;
  --channel-sms:       #64748B;
  --channel-chat:      #14B8A6;

  /* ── Semantic — surfaces ─────────────────────────────────────────── */
  --background:    #F5F6FA;   /* canvas principal — cinza azulado levíssimo */
  --bg:            #F5F6FA;   /* alias */
  --surface1:      #FFFFFF;   /* cards, modais, painéis */
  --surface2:      #F8FAFC;   /* inputs, header de tabela, células alt. */
  --surface3:      #F1F5F9;   /* hover de linha, wells */

  /* ── Semantic — borders ──────────────────────────────────────────── */
  --border:         #E2E8F0;  /* bordas decorativas */
  --border-visible: #CBD5E1;  /* bordas intencionais */

  /* ── Semantic — text ─────────────────────────────────────────────── */
  --fg1: #1E293B;             /* títulos, dados primários */
  --fg2: #475569;             /* labels, descrições */
  --fg3: #94A3B8;             /* placeholders, timestamps */
  --fg4: #CBD5E1;             /* disabled */
  --text1: var(--fg1);        /* compat */
  --text2: var(--fg2);
  --text3: var(--fg3);
  --text4: var(--fg4);

  /* ── Accent ──────────────────────────────────────────────────────── */
  --accent:        #22C55E;
  --accent-hover:  #16A34A;
  --accent-press:  #15803D;
  --accent-subtle: #F0FDF4;
  --accent-ring:   rgba(34,197,94,0.12);

  /* ── Semantic — feedback ─────────────────────────────────────────── */
  --success:      #22C55E;
  --success-bg:   #F0FDF4;
  --success-text: #16A34A;
  --warning:      #F59E0B;
  --warning-bg:   #FEF3C7;
  --warning-text: #D97706;
  --error:        #EF4444;
  --error-bg:     #FEE2E2;
  --error-text:   #DC2626;
  --info:         #3B82F6;
  --info-bg:      #EFF6FF;
  --info-text:    #1D4ED8;

  /* ── Status de apólice (seguros) ─────────────────────────────────── */
  --status-active-color:    #16A34A;  --status-active-bg:    #F0FDF4;
  --status-renewal-color:   #0369A1;  --status-renewal-bg:   #E0F2FE;
  --status-pending-color:   #D97706;  --status-pending-bg:   #FEF3C7;
  --status-expired-color:   #EA580C;  --status-expired-bg:   #FFF7ED;
  --status-cancelled-color: #DC2626;  --status-cancelled-bg: #FEE2E2;

  /* ── Estados de máquina (Conversa / Conteúdo / Jornada) ──────────── */
  /* Conversa: New → Identifying → Bot → Fila → Humano → Resolved → Closed → Reopened */
  --state-bot-color:        #7C3AED;  --state-bot-bg:        #F3E8FF;  /* IA */
  --state-queue-color:      #D97706;  --state-queue-bg:      #FEF3C7;  /* aguardando agente */
  --state-human-color:      #1D4ED8;  --state-human-bg:      #DBEAFE;  /* atendimento humano */
  --state-resolved-color:   #16A34A;  --state-resolved-bg:   #F0FDF4;
  --state-closed-color:     #475569;  --state-closed-bg:     #F1F5F9;
  --state-breached-color:   #DC2626;  --state-breached-bg:   #FEE2E2;  /* SLA estourado */

  /* Conteúdo: Idea → Draft → InReview → Approved → Scheduled → Publishing → Published → Archived */
  --state-draft-color:      #475569;  --state-draft-bg:      #F1F5F9;
  --state-review-color:     #D97706;  --state-review-bg:     #FEF3C7;
  --state-approved-color:   #16A34A;  --state-approved-bg:   #F0FDF4;
  --state-scheduled-color:  #0369A1;  --state-scheduled-bg:  #E0F2FE;
  --state-publishing-color: #7C3AED;  --state-publishing-bg: #F3E8FF;
  --state-published-color:  #16A34A;  --state-published-bg:  #F0FDF4;
  --state-partial-color:    #EA580C;  --state-partial-bg:    #FFF7ED;  /* PartiallyPublished */
  --state-failed-color:     #DC2626;  --state-failed-bg:     #FEE2E2;
  --state-archived-color:   #94A3B8;  --state-archived-bg:   #F8FAFC;

  /* Jornada/Mensagem: Queued → Sending → Sent → Delivered → Read → Replied → Converted / Failed / OptedOut */
  --msg-queued-color:    #475569;  --msg-queued-bg:    #F1F5F9;
  --msg-sending-color:   #0369A1;  --msg-sending-bg:   #E0F2FE;
  --msg-sent-color:      #1D4ED8;  --msg-sent-bg:      #DBEAFE;
  --msg-delivered-color: #16A34A;  --msg-delivered-bg: #F0FDF4;
  --msg-read-color:      #16A34A;  --msg-read-bg:      #DCFCE7;
  --msg-replied-color:   #7C3AED;  --msg-replied-bg:   #F3E8FF;
  --msg-converted-color: #15803D;  --msg-converted-bg: #BBF7D0;
  --msg-bounced-color:   #DC2626;  --msg-bounced-bg:   #FEE2E2;
  --msg-optedout-color:  #94A3B8;  --msg-optedout-bg:  #F8FAFC;

  /* Consent (LGPD) */
  --consent-granted-color: #16A34A;  --consent-granted-bg: #F0FDF4;
  --consent-pending-color: #D97706;  --consent-pending-bg: #FEF3C7;
  --consent-revoked-color: #DC2626;  --consent-revoked-bg: #FEE2E2;

  /* ── Sidebar ─────────────────────────────────────────────────────── */
  --sidebar-bg:     #0A1628;
  --sidebar-text:   #F1F5F9;
  --sidebar-active: rgba(255,255,255,0.08);
  --sidebar-muted:  #64748B;
  --sidebar-width:  220px;
  --topbar-h:       64px;

  /* ── Spacing (grid de 8px) ───────────────────────────────────────── */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --radius-element:   4px;    /* checkboxes, tags inline */
  --radius-control:   6px;    /* buttons, inputs */
  --radius-component: 8px;    /* cards, painéis */
  --radius-container: 12px;   /* modais, drawers */
  --radius-pill:      999px;  /* badges, progress */

  /* ── Shadows (sempre rgba black, nunca colorida) ─────────────────── */
  --shadow-card:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-raised:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-overlay: 0 16px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);

  /* ── Motion (mechanical — sem overshoot) ─────────────────────────── */
  --ease:            cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */
}

/* ── Dark mode ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --background: #0A1628;
  --bg:         #0A1628;
  --surface1:   #0D1B35;
  --surface2:   #152540;
  --surface3:   #1E2F4D;
  --border:         #1E3358;
  --border-visible: #2A4470;
  --fg1: #F1F5F9; --text1: #F1F5F9;
  --fg2: #94A3B8; --text2: #94A3B8;
  --fg3: #64748B; --text3: #64748B;
  --fg4: #334155; --text4: #334155;
  --accent:        #4ADE80;
  --accent-subtle: #052E16;
  --success: #4ADE80; --success-bg: #052E16; --success-text: #4ADE80;
  --warning: #FBBF24; --warning-bg: #451A03; --warning-text: #FBBF24;
  --error:   #F87171; --error-bg:   #450A0A; --error-text:   #F87171;
  --sidebar-bg:    #060D1F;
  --sidebar-text:  #CBD5E1;
  --sidebar-muted: #475569;
}

/* ── Semantic type helpers (use as class) ───────────────────────────── */
.t-display { font: var(--text-display); letter-spacing: var(--ls-display); color: var(--fg1); }
.t-h1      { font: var(--text-h1);      letter-spacing: var(--ls-h1);      color: var(--fg1); }
.t-h2      { font: var(--text-h2);      letter-spacing: var(--ls-h2);      color: var(--fg1); }
.t-h3      { font: var(--text-h3);                                         color: var(--fg1); }
.t-body    { font: var(--text-body);                                       color: var(--fg1); }
.t-body-sm { font: var(--text-body-sm);                                    color: var(--fg2); }
.t-caption { font: var(--text-caption);                                    color: var(--fg3); }
.t-label   { font: var(--text-label);   letter-spacing: var(--ls-label);   color: var(--fg2); text-transform: uppercase; }
.t-mono    { font: var(--text-mono);                                       color: var(--fg1); }