/* ============================================================
   Bravva — Design Tokens (v1.0)
   Identidade oficial: Alexandria + Navy/Violet/Teal.
   Importe este arquivo em qualquer projeto (Vite, Next, Vue,
   Angular, Rails, vanilla...). Em frameworks utility-first
   (Tailwind), o handoff também cobre como mapear para o config.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS (official) ---------- */
  --brand-navy:        #0A4581;   /* primary — wordmark, headers, CTAs */
  --brand-violet:      #9728F7;   /* accent — destaques, admin badge */
  --brand-teal:        #07E2C7;   /* accent — success, ativo na sidebar */
  --brand-slate:       #373643;   /* neutral dark — texto principal */
  --brand-black:       #000000;

  /* ---------- NAVY SCALE (cor primária) ---------- */
  --navy-50:   #EEF3FA;
  --navy-100:  #D6E2F1;
  --navy-200:  #A9C0DF;
  --navy-300:  #6E94C5;
  --navy-400:  #3D6EA9;
  --navy-500:  #1A5191;
  --navy-600:  #0A4581;   /* === --brand-navy === */
  --navy-700:  #073968;
  --navy-800:  #052B4F;
  --navy-900:  #031C36;
  --navy-950:  #02112A;

  /* ---------- VIOLET SCALE (acento vibrante) ---------- */
  --violet-50:   #F7F0FE;
  --violet-100:  #ECDDFC;
  --violet-200:  #D8BBFA;
  --violet-300:  #BE8DF7;
  --violet-400:  #A958F9;
  --violet-500:  #9728F7;   /* === --brand-violet === */
  --violet-600:  #7E16DE;
  --violet-700:  #6310B0;
  --violet-800:  #480C82;
  --violet-900:  #2E0855;

  /* ---------- TEAL SCALE (assinatura discreta) ---------- */
  --teal-50:    #E6FBF7;
  --teal-100:   #C5F6ED;
  --teal-200:   #8DEDDC;
  --teal-300:   #4FDFC6;
  --teal-400:   #1FCFB2;
  --teal-500:   #07E2C7;   /* === --brand-teal === */
  --teal-600:   #04A793;
  --teal-700:   #047F70;
  --teal-800:   #045A50;
  --teal-900:   #033833;

  /* ---------- NEUTRALS (cinzas quentes) ---------- */
  --bg:           #FAFAF9;   /* page background */
  --bg-soft:      #F4F4F2;   /* table header, subtle areas */
  --surface:      #FFFFFF;   /* cards, sidebars (modo claro) */
  --border:       #ECECE9;
  --border-strong:#DEDEDA;
  --text:         #373643;   /* === --brand-slate === */
  --text-soft:    #5A5966;
  --text-mute:    #8B8A92;
  --text-faint:   #B5B4BB;

  /* ---------- STATUS (background tint + foreground) ---------- */
  --status-blue-bg:    #EAF1FA;  --status-blue-fg:    #073968;  /* em atendimento */
  --status-amber-bg:   #FEF6E1;  --status-amber-fg:   #92651A;  /* aguardando atendimento */
  --status-orange-bg:  #FFF1E5;  --status-orange-fg:  #9A3412;  /* aguardando retorno */
  --status-green-bg:   #E0F7F1;  --status-green-fg:   #047F70;  /* fechado */
  --status-red-bg:     #FCEBEC;  --status-red-fg:     #B42318;  /* perdido */
  --status-violet-bg:  #F4E9FE;  --status-violet-fg:  #6310B0;  /* em cotação */
  --status-cyan-bg:    #E0F4FF;  --status-cyan-fg:    #0C5A8A;  /* em análise na seguradora */
  --status-slate-bg:   #EDEDF0;  --status-slate-fg:   #373643;  /* repescagem */

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Alexandria', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Type scale (mobile-first, mas usado em desktop também) */
  --text-xs:   11px;     --lh-xs:   16px;
  --text-sm:   12.5px;   --lh-sm:   18px;
  --text-base: 13.5px;   --lh-base: 20px;
  --text-md:   15px;     --lh-md:   22px;
  --text-lg:   17px;     --lh-lg:   24px;
  --text-xl:   22px;     --lh-xl:   28px;
  --text-2xl:  28px;     --lh-2xl:  34px;
  --text-3xl:  36px;     --lh-3xl:  42px;

  /* Pesos (Alexandria) — use só estes 4 */
  --weight-light:   300;   /* fonte de apoio: descrições, sutilezas */
  --weight-regular: 400;   /* texto contínuo */
  --weight-medium:  500;   /* labels, botões, células primárias */
  --weight-semibold:600;   /* títulos, KPIs, headers */

  /* ---------- SPACING (4px scale) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---------- RADIUS ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* inputs, botões */
  --radius-lg: 10px;    /* cards, tabelas */
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (sutis) ---------- */
  --shadow-xs: 0 1px 0 rgba(7, 12, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(7, 12, 26, 0.06), 0 1px 0 rgba(7, 12, 26, 0.03);
  --shadow-md: 0 4px 12px rgba(7, 12, 26, 0.08), 0 1px 2px rgba(7, 12, 26, 0.04);
  --shadow-lg: 0 12px 32px rgba(7, 12, 26, 0.12), 0 2px 6px rgba(7, 12, 26, 0.06);
  --shadow-focus: 0 0 0 3px var(--navy-100);

  /* ---------- TRANSITIONS ---------- */
  --t-fast: 120ms cubic-bezier(.3,.7,.4,1);
  --t-base: 180ms cubic-bezier(.3,.7,.4,1);
  --t-slow: 280ms cubic-bezier(.3,.7,.4,1);

  /* ---------- LAYOUT ---------- */
  --sidebar-w: 232px;
  --topbar-h:  56px;
  --row-h:     44px;     /* table row compacto */
  --row-h-comfortable: 56px;
}

/* Densidade alternativa (opcional). Adicione data-density="comfortable" ao <html>. */
[data-density="comfortable"] {
  --row-h: 56px;
}
[data-density="spacious"] {
  --row-h: 68px;
}

/* ---------- BASE TYPE ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4 { font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin: 0; }
h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
h2 { font-size: var(--text-xl);  line-height: var(--lh-xl); }
h3 { font-size: var(--text-lg);  line-height: var(--lh-lg); }
h4 { font-size: var(--text-md);  line-height: var(--lh-md); }
small { font-size: var(--text-xs); }