/* ═══════════════════════════════════════════════════
   CMOVE.AI — Design Tokens v4 (Bege + Acentos Vibrantes)
   Inter · BrandBook oficial + modernidade SaaS
   Atualizado em 2026-04-25
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  /* ─── Bege base (BrandBook oficial) ─── */
  --bg:#E8E4DC;            /* Bege Médio · fundo principal página */
  --bg2:#F5F2ED;           /* Bege Claro · cards e superfícies */
  --bg3:#FFFFFF;           /* Branco · cards elevados, modais */
  --bg4:#D8D4CC;           /* Bege Escuro · hover, divisores */
  --bg-sidebar:#0F172A;    /* Dark · sidebar (preserva contraste) */
  --bg-sidebar-2:#1E293B;  /* Dark elevado */

  /* ─── Texto (turquesa-900 sobre bege) ─── */
  --ink:#164E63;           /* Turquesa-900 · texto principal */
  --ink-soft:#334155;      /* Slate-700 · texto secundário */
  --ink-mute:#64748B;      /* Slate-500 · texto auxiliar */
  --ink-disabled:#94A3B8;  /* Slate-400 · desabilitado */

  /* ─── LEGADO (mantido pra compatibilidade) ─── */
  --white:#164E63;         /* nome legado, agora aponta pra texto escuro */
  --gray1:#334155;
  --gray2:#64748B;
  --gray3:#94A3B8;
  --gray4:#CBD5E1;

  /* ─── Brand acentos (BrandBook + extensões pra KPIs) ─── */
  --orange:#F97316;        /* CTA primário · CMOVE oficial */
  --orange-hover:#EA580C;
  --orange-bg:rgba(249,115,22,0.12);
  --orange-border:rgba(249,115,22,0.30);

  --turquoise:#0891B2;     /* Brand primária */
  --turquoise-bg:rgba(8,145,178,0.10);
  --turquoise-border:rgba(8,145,178,0.30);

  --teal:#2DD4BF;          /* Verde-água · secundário */
  --teal-bg:rgba(45,212,191,0.10);

  --green:#10B981;         /* Sucesso · KPI positivo */
  --green2:#059669;
  --green-dim:rgba(16,185,129,0.10);
  --green-border:rgba(16,185,129,0.30);

  --purple:#A855F7;        /* KPI acento 4 */
  --purple-bg:rgba(168,85,247,0.10);
  --purple-border:rgba(168,85,247,0.30);

  --gold:#FACC15;          /* KPI acento 5 */
  --gold-bg:rgba(250,204,21,0.12);
  --gold-border:rgba(250,204,21,0.35);

  --coral:#FB7185;         /* KPI acento 6 */
  --coral-bg:rgba(251,113,133,0.10);
  --coral-border:rgba(251,113,133,0.30);

  --blue:#3B82F6;
  --blue-bg:rgba(59,130,246,0.10);
  --blue-border:rgba(59,130,246,0.30);

  --cyan:#06B6D4;
  --cyan-bg:rgba(6,182,212,0.10);

  /* ─── Estados ─── */
  --red:#EF4444;
  --red-bg:rgba(239,68,68,0.10);
  --red-border:rgba(239,68,68,0.30);
  --yellow:#F59E0B;
  --yellow-bg:rgba(245,158,11,0.10);
  --yellow-border:rgba(245,158,11,0.30);

  /* ─── Bordas (suaves sobre bege) ─── */
  --bord:rgba(22,78,99,0.10);    /* turquesa-900 a 10% */
  --bord2:rgba(22,78,99,0.18);
  --bord-strong:rgba(22,78,99,0.25);

  /* ─── Gradientes oficiais BrandBook ─── */
  --gradient-brand:linear-gradient(135deg,#0891B2 0%,#2DD4BF 50%,#F97316 100%);
  --gradient-subtle:linear-gradient(135deg,#0891B2 0%,#2DD4BF 100%);
  --gradient-orange:linear-gradient(135deg,#F97316 0%,#FB923C 100%);
  --gradient-orange-soft:linear-gradient(135deg,rgba(249,115,22,0.10) 0%,rgba(251,146,60,0.05) 100%);
  --gradient-card:linear-gradient(180deg,#FFFFFF 0%,#FAFAF8 100%);
  --gradient-dark:linear-gradient(180deg,#0F172A 0%,#164E63 100%);

  /* ─── Pills (status) ─── */
  --pill-green-bg:rgba(16,185,129,0.12);
  --pill-green-border:rgba(16,185,129,0.30);
  --pill-yellow-bg:rgba(245,158,11,0.12);
  --pill-yellow-color:#B45309;
  --pill-yellow-border:rgba(245,158,11,0.30);
  --pill-red-bg:rgba(239,68,68,0.12);
  --pill-red-color:#B91C1C;
  --pill-red-border:rgba(239,68,68,0.30);
  --pill-orange-bg:rgba(249,115,22,0.12);
  --pill-orange-color:#C2410C;
  --pill-orange-border:rgba(249,115,22,0.30);
  --pill-blue-bg:rgba(59,130,246,0.12);
  --pill-blue-color:#1D4ED8;
  --pill-blue-border:rgba(59,130,246,0.30);
  --pill-purple-bg:rgba(168,85,247,0.12);
  --pill-purple-color:#7E22CE;
  --pill-purple-border:rgba(168,85,247,0.30);
  --pill-white-bg:rgba(22,78,99,0.06);
  --pill-white-border:rgba(22,78,99,0.15);

  /* ─── Tipografia (BrandBook oficial) ─── */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-italic:'Montserrat',serif;
  --font-mono:'SF Mono',ui-monospace,'Cascadia Code',Menlo,monospace;

  /* ─── Radius ─── */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-2xl:24px;
  --radius-full:9999px;

  /* ─── Spacing ─── */
  --spacing-xs:4px;
  --spacing-sm:8px;
  --spacing-md:12px;
  --spacing-lg:16px;
  --spacing-xl:24px;
  --spacing-2xl:32px;
  --spacing-3xl:48px;
  --pad-lg:40px;
  --pad-md:24px;
  --pad-sm:16px;
  --gap-cards:20px;

  /* ─── Sombras (suaves, light theme) ─── */
  --shadow-xs:0 1px 2px rgba(22,78,99,0.04);
  --shadow-sm:0 1px 3px rgba(22,78,99,0.06),0 1px 2px rgba(22,78,99,0.04);
  --shadow-md:0 4px 8px rgba(22,78,99,0.06),0 2px 4px rgba(22,78,99,0.04);
  --shadow-lg:0 10px 20px rgba(22,78,99,0.08),0 4px 8px rgba(22,78,99,0.04);
  --shadow-xl:0 20px 35px rgba(22,78,99,0.10),0 10px 15px rgba(22,78,99,0.05);
  --shadow-glow-orange:0 8px 24px rgba(249,115,22,0.18);
  --shadow-glow-turquoise:0 8px 24px rgba(8,145,178,0.15);
  --elevation-1:0 2px 6px rgba(22,78,99,0.06);
  --elevation-2:0 4px 12px rgba(22,78,99,0.08);
  --elevation-3:0 8px 20px rgba(22,78,99,0.12);
}

/* ─── Base ─── */
body, html {
  font-family: var(--font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}

em, .serif-italic {
  font-family: var(--font-italic);
  font-style: italic;
}

code, pre, .mono {
  font-family: var(--font-mono);
}

/* ─── Animations ─── */
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.4;}
}
@keyframes shimmer{
  0%{background-position:-1000px 0;}
  100%{background-position:1000px 0;}
}
@keyframes ping{
  75%,100%{transform:scale(2);opacity:0;}
}
@keyframes fade-in{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}