/* ENCORE BACKSTAGE — os tokens do design system próprio do CRM interno de vendas. Origem: fork, em 25/09/2026, das folhas do Encore CRM (encore-disparador-v2/ds, commit 2f00d7e), que moram sem edição em ds/base/. Esta folha carrega DEPOIS de ds/base/tokens.css e reescreve os valores: o que o Backstage herda é a GRAMÁTICA (Onest, pílula, card sem sombra, as cinco famílias de estado, a tabela sem linhas); o que ele troca é o MUNDO. O mundo é o palco escuro (Alex, 25/09/2026: "fica com liberdade para criar um design system do crm interno e deixar ele diferente"). A página é quase preta e quente, o card é grafite, e o lime deixa de ser detalhe: é a luz do palco, e cai onde está a ação do dia (o foco, o próximo passo, a prioridade, a meta). A tinta vira PAPEL: o que no produto é preto (botão principal, pílula ativa, card de destaque) aqui é claro. O Encore CRM que se vende continua claro, e os dois não se confundem. ⛔ Nenhuma cor fora daqui. Contraste medido contra --surface-card (#1A1A18). ⭐ Desde 26/09/2026 o DS do Backstage é ISOLADO (Alex: "nós não vamos alimentar o design system do encore CRM"): ds/base/ também pode ser editado, e nada daqui volta para o encore-disparador-v2. */ /* ⭐ Dois temas desde 26/09/2026 (Alex: "preciso da opção de variar entre light e dark mode"). O escuro é o padrão e a identidade do Backstage; o claro é o mundo do Encore CRM que já vem de ds/base/tokens.css, sem valor novo. Quem escolhe é o atributo data-tema no , gravado no navegador de cada pessoa. */ :root[data-tema="claro"] { color-scheme: light; } :root:not([data-tema="claro"]) { color-scheme: dark; /* A escada de superfície, invertida: cada degrau é um passo mais claro. */ --bg-page: #111110; --surface-card: #1A1A18; --surface-inset: #21211F; --surface-control: #292926; --surface-control-hover: #33332F; --surface-control-on-card: #292926; /* A tinta vira papel. */ --surface-dark: #F1F1EC; --surface-dark-hover: #FFFFFF; --surface-dark-elevated: #E4E4DE; --text-on-dark: #111110; --text-on-dark-muted: #55554F; /* A escada de texto subiu em 26/09/2026 (Alex: "leitura difícil em alguns lugares no modo dark"). A de antes era a do produto claro invertida e passava o mínimo (4,5:1), mas 1.100 textos de 11 e 12 px ficavam entre 4,6 e 6,7:1. Agora, sobre o card: secundário 10,4:1, terciário 8,4:1, quaternário 7,6:1; sobre o controle, todos acima de 6,3:1. */ --text-primary: #F1F1EC; --text-secondary: #C8C8C1; --text-tertiary: #B4B4AD; --text-quaternary: #ABABA4; --text-nav: #D6D6CF; /* Traço fino em fundo escuro some: o peso 300 do produto claro vira 350 aqui (a Onest é variável). */ --weight-light: 350; --text-on-accent: #111110; --border-divider: #2A2A27; --border-outline: #3B3B37; --track: #30302D; --bar-neutral: #3B3B37; --bar-hatch: #77776F; /* A escala neutra herdada, remapeada para quem a usa direto (gaveta, calendário, etiqueta). */ --white: #1F1F1D; --gray-25: #1C1C1A; --gray-50: #21211F; --gray-100: #292926; --gray-150: #111110; --gray-200: #2A2A27; --gray-250: #33332F; --gray-300: #3B3B37; --gray-400: #4B4B46; --ink-150: #5A5A54; /* As cinco famílias no escuro: `soft` é fundo de etiqueta, `ink` é texto, `forte` é barra. */ --lime-soft: #28320F; --lime-ink: #D8F78A; --lime-forte: #B7DC4F; --azul-soft: #102A3D; --azul-ink: #9AD4FF; --azul-forte: #58B9FF; --ambar-soft: #3A2713; --ambar-ink: #F8C593; --ambar-forte: #F7A55E; --coral-soft: #3E1D1D; --coral-ink: #FFB0B0; --coral-forte: #FF8F8F; --violeta-soft: #2A2342; --violeta-ink: #D2C5F5; --violeta-forte: #B9A6E8; --sel-anel: var(--lime-500); --sel-bg: var(--lime-soft); --rec-borda: var(--lime-forte); --serie-1: var(--surface-dark); } :root { /* ── O que só o Backstage tem, igual nos dois temas ─────────────────────────────────────────── */ /* O palco: o campo lime onde mora a ação do dia. Sobre ele, o texto é a página. */ --palco: var(--lime-500); --palco-tile: #DCFB86; --palco-trilho: #B2D64B; --palco-ink: #111110; --palco-muted: #3A4A10; }