/* ============================================================================ PLX TOKENS — design system do painel como CSS variables DE VERDADE ---------------------------------------------------------------------------- Fonte única dos valores. Nasceu no passo 1 do redesign (FR1, plano analise-falume/20-projeto-redesign-ui.md §5 + spec redesign/04-design-system.md): · [HERDADO] — valores que já viviam no `:root` do index.html (constituição PLX-DESIGN.md §2.6 / plx-design-system/tokens.css); movidos pra cá VERBATIM, sem troca de fonte. · [PROPOSTO] — bloco §1.11 da spec 04 (semânticos de estado, superfícies de interação, espaçamento 4/8, densidade, z-index) + escala de tipografia densa §1.4. COMO CONSOME (padrão da casa p/ asset compartilhado — cf. assets/vendor/ plx-fonts.css): o index.html carrega este arquivo UMA vez no e TODA tela do painel — vanilla embutida, módulos js/*.js e features React montadas via PLX.route no MESMO documento — herda os valores por `var(--token)`. Features React NÃO empacotam este arquivo: elas montam no documento do shell (mesma origem), então a variável já está lá (é o que crm-app/src/styles.ts já fazia com os tokens antigos). REGRA (constituição): valor fora desta tabela = DESIGN-SYSTEM-GAP — reporta, nunca forka em silêncio. Dark quente SEMPRE (sem light mode). Magenta solo só "AO VIVO"/urgência real; gradiente nos 4 usos exclusivos. ============================================================================ */ :root { /* ---------- cor · base [HERDADO] ---------- */ --bg:#121014; /* L0 — fundo do app */ --surface:#1B181E; /* L1 — card, painel, célula */ --surface-2:#221E26; /* L2 — item ativo, avatar, card elevado */ --surface-hero:linear-gradient(180deg,#1D1A20 0%,#1B181E 100%); --surface-print:#17141A; --line:#2A2530; /* divisor de tabela, hairline */ --line-2:#3A3441; /* borda de card no hover, borda de overlay */ --text:#F4F0EC; /* 16,69:1 sobre --bg */ --muted:#A89FA6; /* 7,37:1 sobre --bg */ --faint:#8E848C; /* 5,25:1 — PROIBIDO em overlay L3 (4,15:1) */ --ink-on-grad:#1A0D12; --amber:#FFB02E; /* atividade, KPI N2, foco default */ --magenta:#FF4F8B; /* SOLO = "AO VIVO" / urgência REAL (SLA>30min) */ --grad:linear-gradient(98deg,#FFB02E 0%,#FF4F8B 100%); /* 4 usos exclusivos */ /* tints de chip [HERDADO] */ --accent-tint:rgba(74,222,128,.12); --accent-line:rgba(74,222,128,.32); --warm-tint:rgba(255,176,46,.12); --warm-line:rgba(255,176,46,.30); --cold-tint:rgba(168,159,166,.10); --live-tint:rgba(255,79,139,.12); --live-line:rgba(255,79,139,.35); /* ---------- cor · semânticos de estado [PROPOSTO · spec 04 §1.1.2] ---------- */ --success:#4ADE80; /* [ALIAS] do accent seller — ganhou/confirmado */ --success-tint:rgba(74,222,128,.14); --success-tint-strong:rgba(74,222,128,.22); /* borda de seleção de linha */ --warning:var(--amber); /* [ALIAS] — esquentando/quase no limite */ --warning-tint:rgba(255,176,46,.14); --danger:#FF6E6E; /* único hex novo — destrutivo/perda/erro */ --danger-tint:rgba(255,110,110,.14); --danger-tint-strong:rgba(255,110,110,.30); /* borda de confirmação destrutiva */ --info:#2EE6C8; /* [ALIAS] do turquesa — informativo neutro */ --info-tint:rgba(46,230,200,.14); --ink-on-success:var(--ink-on-grad); --ink-on-warning:var(--ink-on-grad); --ink-on-danger:var(--ink-on-grad); /* ---------- cor · superfícies de interação [PROPOSTO] ---------- */ --surface-hover:#1F1B22; /* passo L1→L2 p/ hover de linha densa */ --surface-selected:rgba(74,222,128,.10); /* linha marcada no checkbox */ --surface-3:#2A2530; /* L3 — modal/drawer/popover; DENTRO de L3, divisor = --line-2 (regra s2) */ --scrim:rgba(10,8,13,.62); /* véu atrás de overlay — nunca #000 puro */ /* ---------- elevação [PROPOSTO §1.7 — sombra NEUTRA só em L3] ---------- */ --shadow-overlay:0 24px 64px rgba(0,0,0,.52); /* modal, drawer */ --shadow-pop:0 8px 28px rgba(0,0,0,.42); /* popover, menu, sino */ /* glow [HERDADO] — linguagem de máquina viva, NÃO é elevação */ --glow-warm:0 0 24px rgba(255,176,46,.13),0 0 48px rgba(255,79,139,.10); --glow-warm-soft:0 0 22px rgba(255,176,46,.09),0 16px 44px rgba(255,79,139,.09); --glow-num:0 0 28px rgba(255,176,46,.22); --glow-dot:0 0 8px rgba(255,176,46,.7); --border-active:rgba(255,176,46,.32); --border-active-strong:rgba(255,176,46,.45); --hairline-grad:linear-gradient(90deg,transparent,rgba(255,176,46,.8) 35%,rgba(255,79,139,.8) 65%,transparent); /* ---------- tipografia [HERDADO famílias/pesos · §1.4] ---------- */ --display:'Space Grotesk',sans-serif; /* 500/600/700 (self-hosted) */ --body:'Inter',sans-serif; /* 400/500/600 (self-hosted) */ /* escala densa do CRM [PROPOSTO §1.4] */ --fs-tbl-title:13px; --lh-tbl-title:1.35; /* título de tabela/coluna kanban */ --fs-cell:13px; --lh-cell:1.4; /* célula de tabela/lista */ /* ---------- raio [HERDADO §1.6 — nenhum raio novo] ---------- */ --r:16px; --r-card-print:14px; --r-item:12px; --r-btn:11px; --r-sm:10px; --r-pill:99px; --r-focus:6px; /* ---------- espaçamento 4/8 [PROPOSTO §1.5] ---------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; /* ---------- densidade de tabela/lista/shell [PROPOSTO §1.8] ---------- */ --row-h:40px; --row-h-compact:32px; --cell-px:12px; --topbar-h:56px; --sidebar-w:248px; --sidebar-w-min:64px; --nav-item-h:36px; --kanban-col-w:292px; --pane-list:340px; --pane-ctx:320px; --drawer-w:440px; --input-h:36px; /* ---------- motion [HERDADO §1.9] ---------- */ --t-fast:150ms; --t-card:180ms; --t-bump:220ms; --t-enter:240ms; --t-glow:250ms; --t-counter:1200ms; /* ---------- z-index [PROPOSTO §1.10] ---------- */ --z-sticky:100; --z-drawer:300; --z-modal:400; --z-popover:550; --z-toast:700; /* ---------- accent por produto [HERDADO] ---------- */ --accent:var(--amber); } [data-product="seller"] { --accent:#4ADE80; } /* verde-PIX 10,86:1 (seller/CRM) */ /* foco de linha de tabela: anel accent POR DENTRO da célula (spec 04 §1.11) */ tr:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }