/* ============================================================================
   FLUXA — Design System — "Azul & Verde"
   Tokens: paleta, cores semânticas (dark/light), tipografia, espaçamento,
   motion, z-index e utilitários de layout. Componentes ficam em app.css.
   Regra de ouro: nenhuma cor hardcoded fora deste arquivo.
   ============================================================================ */

:root {
  /* ── AZUL — primary (ação) ── */
  --blue-50:#e8f1ff; --blue-100:#cfe0ff; --blue-200:#a3c4ff; --blue-300:#6ea3ff;
  --blue-400:#3d82ff; --blue-500:#1B6EF3; --blue-600:#1256d4; --blue-700:#0e43a8;
  --blue-800:#0c3585; --blue-900:#0a2a68;

  /* ── VERDE — accent (sucesso, progresso, IA) ── */
  --green-50:#e3fff6; --green-100:#c0ffec; --green-200:#8bf7d8; --green-300:#4fefc0;
  --green-400:#1fe3a8; --green-500:#05E6A8; --green-600:#04c48f; --green-700:#039a72;
  --green-800:#037a5b; --green-900:#02533d;

  /* ── Gradiente assinatura ── */
  --grad-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--green-500) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(27,110,243,.14), rgba(5,230,168,.14));

  /* ── Neutros de apoio (slate) ── */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;

  /* ── Estados semânticos base ── */
  --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-900:#78350f; --amber-950:#451a03;
  --rose-400:#fb7185;  --rose-500:#f43f5e;  --rose-600:#e11d48;  --rose-900:#881337;  --rose-950:#4c0519;
  --sky-400:#38bdf8;   --sky-500:#0ea5e9;   --sky-600:#0284c7;   --sky-900:#0c4a6e;   --sky-950:#082f49;

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

  --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem;  --text-xl: 1.25rem; --text-2xl: 1.5rem;  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;  --text-5xl: 3rem;   --text-6xl: 3.75rem;

  --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375;
  --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2;

  --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em;
  --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em;

  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800;

  /* ── Espaçamento (base 4px) ── */
  --sp-px: 1px; --sp-0-5: 0.125rem; --sp-1: 0.25rem; --sp-1-5: 0.375rem; --sp-2: 0.5rem;
  --sp-2-5: 0.625rem; --sp-3: 0.75rem; --sp-3-5: 0.875rem; --sp-4: 1rem; --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem;

  /* ── Radius ── */
  --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px;

  /* ── Z-Index ── */
  --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200;
  --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* ── Motion ── */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms;
  --duration-slow: 400ms; --duration-slower: 600ms;
}

/* ============================================================================
   Tokens semânticos — DARK (padrão)
   ============================================================================ */
[data-theme="dark"], :root {
  --bg-base:#050B14; --bg-raised:#0A1420; --bg-overlay:#0f1c2c; --bg-sunken:#03080F;

  --surface-1: rgba(255,255,255,.03); --surface-2: rgba(255,255,255,.06);
  --surface-3: rgba(255,255,255,.10); --surface-hover: rgba(255,255,255,.08);
  --surface-active: rgba(255,255,255,.12);

  --border-subtle: rgba(255,255,255,.05); --border-default: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.20); --border-focus: var(--color-primary);

  --text-primary:#EAF2FF; --text-secondary:rgba(234,242,255,.66);
  --text-tertiary:rgba(234,242,255,.40); --text-disabled:rgba(234,242,255,.25);
  --text-inverse:#050B14;

  --color-primary: var(--blue-500); --color-primary-hover: var(--blue-400);
  --color-primary-subtle: rgba(27,110,243,.15); --color-primary-border: rgba(27,110,243,.32);

  --color-accent: var(--green-500); --color-accent-hover: var(--green-400);
  --color-accent-subtle: rgba(5,230,168,.15); --color-accent-border: rgba(5,230,168,.30);

  --color-success: var(--green-500); --color-success-subtle: var(--green-900);
  --color-success-border: rgba(5,230,168,.25); --color-success-text: var(--green-400);

  --color-warning: var(--amber-500); --color-warning-subtle: var(--amber-950);
  --color-warning-border: rgba(245,158,11,.25); --color-warning-text: var(--amber-400);

  --color-danger: var(--rose-500); --color-danger-subtle: var(--rose-950);
  --color-danger-border: rgba(244,63,94,.25); --color-danger-text: var(--rose-400);

  --color-info: var(--sky-500); --color-info-subtle: var(--sky-950);
  --color-info-border: rgba(14,165,233,.25); --color-info-text: var(--sky-400);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.10);
  --shadow-glow: 0 0 24px rgba(5,230,168,.30);
  --ring-brand: 0 0 0 3px rgba(27,110,243,.25);

  --scrollbar-thumb: rgba(255,255,255,.15); --scrollbar-track: transparent;
}

/* ============================================================================
   Tokens semânticos — LIGHT
   ============================================================================ */
[data-theme="light"] {
  --bg-base:#F2F7FC; --bg-raised:#FFFFFF; --bg-overlay:#FFFFFF; --bg-sunken:#E7EEF6;

  --surface-1: rgba(10,26,47,.02); --surface-2: rgba(10,26,47,.04);
  --surface-3: rgba(10,26,47,.07); --surface-hover: rgba(10,26,47,.05);
  --surface-active: rgba(10,26,47,.09);

  --border-subtle: rgba(10,26,47,.06); --border-default: rgba(10,26,47,.12);
  --border-strong: rgba(10,26,47,.24); --border-focus: var(--color-primary);

  --text-primary:#0A1A2F; --text-secondary:#3A5068; --text-tertiary:#8298AE;
  --text-disabled:#B7C5D6; --text-inverse:#FFFFFF;

  --color-primary: var(--blue-600); --color-primary-hover: var(--blue-700);
  --color-primary-subtle: rgba(18,86,212,.08); --color-primary-border: rgba(18,86,212,.20);

  --color-accent: var(--green-600); --color-accent-hover: var(--green-700);
  --color-accent-subtle: rgba(4,196,143,.10); --color-accent-border: rgba(4,196,143,.22);

  --color-success: var(--green-600); --color-success-subtle:#e3fff6;
  --color-success-border: rgba(4,196,143,.20); --color-success-text: var(--green-700);

  --color-warning: var(--amber-600); --color-warning-subtle:#fffbeb;
  --color-warning-border: rgba(217,119,6,.20); --color-warning-text: var(--amber-600);

  --color-danger: var(--rose-600); --color-danger-subtle:#fff1f2;
  --color-danger-border: rgba(225,29,72,.20); --color-danger-text: var(--rose-600);

  --color-info: var(--sky-600); --color-info-subtle:#f0f9ff;
  --color-info-border: rgba(2,132,199,.20); --color-info-text: var(--sky-600);

  --shadow-xs: 0 1px 2px rgba(10,26,47,.06);
  --shadow-sm: 0 1px 3px rgba(10,26,47,.10), 0 1px 2px rgba(10,26,47,.06);
  --shadow-md: 0 4px 6px rgba(10,26,47,.07), 0 2px 4px rgba(10,26,47,.06);
  --shadow-lg: 0 10px 15px rgba(10,26,47,.10), 0 4px 6px rgba(10,26,47,.05);
  --shadow-xl: 0 20px 25px rgba(10,26,47,.10), 0 10px 10px rgba(10,26,47,.04);
  --shadow-glow: 0 0 20px rgba(5,230,168,.18);
  --ring-brand: 0 0 0 3px rgba(18,86,212,.18);

  --scrollbar-thumb: rgba(10,26,47,.20); --scrollbar-track: transparent;
}

/* ============================================================================
   Base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }

::selection { background: var(--color-primary); color: #fff; }

:focus-visible { outline: none; box-shadow: var(--ring-brand); border-radius: var(--radius-md); }

/* ── Tipografia utilitária ── */
.text-display { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--font-extrabold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.text-title-xl { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--font-bold); letter-spacing: var(--tracking-tight); }
.text-title-lg { font-size: var(--text-3xl); font-weight: var(--font-bold); }
.text-title    { font-size: var(--text-2xl); font-weight: var(--font-semibold); }
.text-heading  { font-size: var(--text-xl);  font-weight: var(--font-semibold); }
.text-subhead  { font-size: var(--text-lg);  font-weight: var(--font-medium); }
.text-body     { font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--leading-relaxed); }
.text-caption  { font-size: var(--text-sm);  color: var(--text-secondary); }
.text-label    { font-size: var(--text-xs);  font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-tertiary); }
.text-mono     { font-family: var(--font-mono); }

/* ── Glassmorphism ── */
.glass {
  background: var(--surface-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}

/* ── Borda gradiente (KPI cards, destaques) ── */
.gradient-border {
  position: relative;
  border-radius: var(--radius-xl);
}
.gradient-border::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-brand-soft);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Layout: container & grid ── */
.container { width: 100%; margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 640px)  { .container { max-width: 640px;  padding-inline: var(--sp-6); } }
@media (min-width: 768px)  { .container { max-width: 768px;  padding-inline: var(--sp-6); } }
@media (min-width: 1024px) { .container { max-width: 1024px; padding-inline: var(--sp-8); } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1440px; } }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 768px)  { .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } }
.gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .gap-10 { gap: var(--sp-10); }

/* ── Touch targets (mobile-first real) ── */
@media (max-width: 767px) {
  button, .btn, a.nav-item, input, select, textarea { touch-action: manipulation; }
}