/* ============================================================
   NEXI LEAD 360 — DESIGN TOKENS
   Importar primeiro, antes de qualquer outro CSS.
   
   @import './tokens.css';
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* app é sempre dark, sem toggle de tema — isto faz TODO controle nativo do navegador
     (popup do <select>, calendário do <input type="date">, scrollbar) nascer escuro
     de fábrica, em qualquer tela, sem precisar estilizar option/::-webkit-* um por um.
     10/08: mesmo truque já usado localmente em .bd-pop input[type=date] (board.css) —
     aqui vira global pra valer em qualquer select/date do sistema, não só ali. */
  color-scheme: dark;

  /* ── CORES PRIMITIVAS ── */
  --color-green-500:   #09bc8a;
  --color-green-600:   #07a57a;
  --color-green-400:   #2ecda0;
  --color-red-500:     #e8484a;
  --color-amber-500:   #f0a020;
  --color-blue-500:    #3a7ef0;
  --color-rose-500:    #e8649a;  /* rosa-quente: contatos, hunter, reuniões  */
  --color-violet-500:  #9b7ef0;  /* violeta:     campanha, e-mail, conversão  */
  --color-cyan-500:    #22c6d4;  /* ciano:       mapa, geo, descoberta        */
  --color-orange-500:  #f97316;  /* laranja:     pipeline, oportunidade       */

  /* ── CORES SEMÂNTICAS ── */
  --accent:            var(--color-green-500);
  --accent-hover:      var(--color-green-600);
  --accent-soft:       rgba(9, 188, 138, 0.10);
  --accent-glow:       rgba(9, 188, 138, 0.20);
  --accent-border:     rgba(9, 188, 138, 0.30);

  --danger:            var(--color-red-500);
  --danger-soft:       rgba(232, 72, 74, 0.10);

  --warning:           var(--color-amber-500);
  --warning-soft:      rgba(240, 160, 32, 0.10);

  --info:              var(--color-blue-500);
  --info-soft:         rgba(58, 126, 240, 0.10);

  --rose:              var(--color-rose-500);
  --rose-soft:         rgba(232, 100, 154, 0.10);
  --rose-border:       rgba(232, 100, 154, 0.28);

  --violet:            var(--color-violet-500);
  --violet-soft:       rgba(155, 126, 240, 0.10);
  --violet-border:     rgba(155, 126, 240, 0.28);

  --cyan:              var(--color-cyan-500);
  --cyan-soft:         rgba(34, 198, 212, 0.10);
  --cyan-border:       rgba(34, 198, 212, 0.28);

  --orange:            var(--color-orange-500);
  --orange-soft:       rgba(249, 115, 22, 0.10);
  --orange-border:     rgba(249, 115, 22, 0.28);

  /* ── SUPERFÍCIES ── */
  /* Calm Dark Nexi (10/06): dark NEUTRO (sem azul) com elevação TONAL —
     cada camada um degrau mais clara que a anterior (escola Linear).
     Escada alinhada ao reference design Gentell (#1e1f24/#24262e). */
  --bg:                #15161b;
  --surface-1:         #1c1d23;   /* sidebar, topbar, cards */
  --surface-2:         #24252c;   /* elementos elevados dentro de cards */
  --surface-3:         #2c2d35;   /* hover states profundos */

  /* ── BORDAS ── */
  --border-subtle:     rgba(255, 255, 255, 0.070);
  --border-default:    rgba(255, 255, 255, 0.110);
  --border-strong:     rgba(255, 255, 255, 0.170);
  --border-accent:     var(--accent-border);

  /* ── TEXTO ── */
  --text-primary:      #eceef2;
  --text-secondary:    #a9adb8;
  --text-muted:        #8b8f9a;   /* ~4,8:1 sobre surface-1 (AA) */
  --text-on-accent:    #071210;

  /* ── TIPOGRAFIA ── */
  --font-sans:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:         'IBM Plex Mono', 'Fira Code', monospace;

  --text-xs:    11px;
  --text-sm:    12.5px;
  --text-base:  13.5px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    24px;
  --text-2xl:   28px;
  --text-3xl:   36px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.15;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── ESPAÇAMENTO (base 4px) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

  /* ── BORDER RADIUS ── */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  12px;
  --radius-card: 14px;   /* cards/painéis premium (eleva o acabamento) */
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── SOMBRAS EM CAMADAS (régua extraída da apresentação CCE) ──
     Cada elevação = fio de luz (ring 1px) + sombra perto + sombra longe.
     É o trio que faz o card "flutuar" sem custo de blur. */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:   0 0 0 1px rgba(255,255,255,0.04), 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg:   0 0 0 1px rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-xl:   0 0 0 1px rgba(255,255,255,0.06), 0 16px 50px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.40);
  /* elevação de card em repouso e no hover */
  --shadow-card:       0 0 0 1px rgba(255,255,255,0.045), 0 2px 8px rgba(0,0,0,0.28), 0 12px 36px rgba(0,0,0,0.22);
  --shadow-card-hover: 0 0 0 1px rgba(255,255,255,0.090), 0 4px 14px rgba(0,0,0,0.40), 0 22px 60px rgba(0,0,0,0.34);
  --shadow-accent:    0 0 20px rgba(9,188,138,0.22);
  --shadow-accent-lg: 0 0 32px rgba(9,188,138,0.32);
  /* fio de luz no topo de cards/superfícies (glass refinado, custo zero) */
  --card-edge:  inset 0 1px 0 rgba(255,255,255,0.06);

  /* ── GRADIENTES (acentos de marca + tinta de status) ── */
  --gradient-accent:  linear-gradient(135deg, var(--color-green-400), var(--color-green-500));
  --gradient-surface: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  --gradient-danger:  linear-gradient(135deg, #ff5f6d, var(--danger));
  --gradient-warning: linear-gradient(135deg, #fbbf24, var(--warning));
  --gradient-info:    linear-gradient(135deg, #60a5fa, var(--info));
  --gradient-rose:    linear-gradient(135deg, #f472b6, var(--rose));
  --gradient-violet:  linear-gradient(135deg, #c4b5fd, var(--violet));
  --gradient-cyan:    linear-gradient(135deg, #67e8f9, var(--cyan));
  --gradient-orange:  linear-gradient(135deg, #fdba74, var(--orange));
  /* título "premium": branco esvaindo para cinza (clip no texto) */
  --gradient-text:    linear-gradient(180deg, #ffffff 28%, #a8abc0);
  /* divisória que esvai (cabeçalho de seção) */
  --gradient-divider: linear-gradient(90deg, var(--border-default), transparent);

  /* ── FUNDO AMBIENTE (dot grid + aurora) ── */
  --watermark:  rgba(184,190,206,0.055);  /* letra d'água nos cards (#3) */
  --dot-grid:   radial-gradient(circle at 1px 1px, rgba(255,255,255,0.022) 1px, transparent 0);
  --dot-size:   28px;

  /* ── MOVIMENTO (Motion Lab 10/06) ──
     Regra: animar SÓ transform/opacity; saída ~60% da entrada;
     entrada de página anima UMA vez (nunca por MutationObserver). */
  --m-fast:   120ms;                            /* press, toggles      */
  --m-base:   180ms;                            /* hover, estados      */
  --m-slow:   300ms;                            /* expandir, indicador */
  --m-enter:  500ms;                            /* entrada de página   */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* expo-out: entradas  */
  --e-in:     cubic-bezier(0.7, 0, 0.84, 0);    /* saídas              */
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* overshoot: toasts   */
  --stagger:  50ms;

  /* ── LAYOUT ── */
  --sidebar-width:  232px;
  --topbar-height:  58px;

  /* ── TRANSIÇÕES ── */
  --transition-fast:   all 0.12s ease;
  --transition-base:   all 0.18s ease;
  --transition-slow:   all 0.30s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-INDEX ── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sidebar:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-topbar:   150;
}