/* ============================================================================
   OFFICEBAND — DESIGN TOKENS (fonte única de verdade)
   ----------------------------------------------------------------------------
   Princípios: minimalista · base preto/cinza · acentos rotativos
   (vermelho · verde · amarelo · laranja) · SEM azul · paddings pequenos ·
   pouco gap · telas full-width · cara de app no celular.
   Importe este arquivo em qualquer página. Tudo consome estas variáveis.
   ============================================================================ */

:root {
  /* --- Tipografia ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Escala de tamanho (compacta, app-like) */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.8125rem; /* 13px */
  --text-base:0.875rem;  /* 14px  ← base do app (denso, não 16px) */
  --text-md:  0.9375rem; /* 15px */
  --text-lg:  1.0625rem; /* 17px */
  --text-xl:  1.3125rem; /* 21px */
  --text-2xl: 1.625rem;  /* 26px */
  --text-3xl: 2.125rem;  /* 34px */
  --text-4xl: 3rem;      /* 48px */

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.04em;

  /* --- Neutros (escala "ink": quase-preto → branco) -------------------- */
  --ink-950: #0a0a0b;
  --ink-900: #141416;
  --ink-800: #1f1f23;
  --ink-700: #2e2e33;
  --ink-600: #45454c;
  --ink-500: #5e5e66;
  --ink-400: #87878f;
  --ink-300: #b4b4bc;
  --ink-200: #d6d6dc;
  --ink-100: #eaeaee;
  --ink-50:  #f5f5f7;
  --ink-25:  #fafafb;
  --white:   #ffffff;

  /* --- Acentos rotativos (4 famílias, SEM azul) ----------------------- */
  /* cada uma: solid (ícone/detalhe) · strong (texto sobre claro) · soft (fundo) */
  --red:         #e5484d;
  --red-strong:  #c2282d;
  --red-soft:    #fceced;

  --green:        #1fa055;
  --green-strong: #177d42;
  --green-soft:   #e6f6ec;

  --yellow:        #e0a100; /* âmbar legível; "amarelo" puro queima no branco */
  --yellow-strong: #a87800;
  --yellow-soft:   #fbf0cf;

  --orange:        #f1682c;
  --orange-strong: #ce5018;
  --orange-soft:   #fdeadf;

  /* Sequência de rotação — use nesta ordem ao colorir categorias/listas */
  --accent-1: var(--red);
  --accent-2: var(--green);
  --accent-3: var(--yellow);
  --accent-4: var(--orange);

  /* --- Papéis semânticos ---------------------------------------------- */
  --bg:            var(--ink-25);   /* fundo da app */
  --surface:       var(--white);    /* cards, painéis */
  --surface-2:     var(--ink-50);   /* sub-superfície / hover */
  --border:        var(--ink-100);  /* divisórias leves */
  --border-strong: var(--ink-200);
  --text:          var(--ink-900);  /* texto principal */
  --text-soft:     var(--ink-500);  /* secundário */
  --text-faint:    var(--ink-400);  /* terciário / placeholder */
  --text-on-dark:  var(--ink-25);

  /* Status (mapeia o pipeline de shows do produto) */
  --status-lead:        var(--yellow);  /* lead */
  --status-negotiating: var(--orange);  /* negociando */
  --status-confirmed:   var(--green);   /* confirmado / realizado */
  --status-paid:        var(--green-strong); /* pago */
  --status-lost:        var(--red);     /* perdido / atrasado */

  /* --- Espaçamento (compacto — paddings pequenos, pouco gap) ----------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;

  --gap: var(--space-4);       /* gap padrão entre itens: 8px */
  --pad: var(--space-6);       /* padding padrão de card: 12px */
  --pad-tight: var(--space-4); /* 8px */

  /* --- Raio ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* --- Sombras (leves — cards "leves") -------------------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 10, 11, 0.06), 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow:    0 2px 8px rgba(10, 10, 11, 0.06);
  --shadow-lg: 0 8px 24px rgba(10, 10, 11, 0.08);
  --ring:      0 0 0 2px var(--surface), 0 0 0 4px var(--ink-300);

  /* --- Layout ---------------------------------------------------------- */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 52px;
  --bottombar-h: 56px; /* tab bar mobile */

  /* --- Ícones (thin / stroke fino) ------------------------------------ */
  --icon-stroke: 1.5; /* largura de traço dos ícones (Lucide etc.) */
  --icon-sm: 16px;
  --icon:    18px;
  --icon-lg: 20px;

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
}

/* Reset enxuto compartilhado --------------------------------------------- */
*, *::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);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* Seleção de texto — neutra (sem o azul nativo do navegador) */
::selection { background: var(--ink-900); color: var(--white); }
::-moz-selection { background: var(--ink-900); color: var(--white); }

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