/* ============================================================ OK Markei — Paleta 1c "Azul Royal" Tokens de cor. Fonte: docs/design/handoff_cores/HANDOFF-CORES.md web -> "Paleta 1c - Azul Royal" mobile -> "Paleta 1c - Mobile" Só cor. Não altera tipografia, espaçamento ou raio. ⚠️ ADAPTAÇÃO AO PROJETO (item 3 do handoff) O handoff assume tema CLARO como default. Aqui é o contrário: o painel e o app do cliente pintam ESCURO por padrão (`:root`) e o claro é que é opt-in via `[data-theme="light"]` (ver Web/base.html e app/_theme_head_partial.html). Por isso os blocos foram invertidos em relação ao arquivo original — os VALORES são exatamente os aprovados, só o seletor de cada bloco mudou. ⚠️ REGRA QUE NÃO PODE SER QUEBRADA (§2 do handoff) `--primary` é cor de PREENCHIMENTO. Texto/ícone azul sobre fundo usa `--primary-text` (no escuro vira #8FB6FF). `--primary` como cor de texto no tema escuro reprova contraste. ============================================================ */ :root { /* --- Marca (não muda com o tema) --- */ --brand-navy: #12274A; --brand-blue: #1F5FD0; --brand-blue-strong: #1A5FDB; --brand-blue-light: #8FB6FF; --brand-blue-deep: #17489F; /* derivado (§1.4): a 2ª parada do gradiente do botão primário e do painel do login */ --brand-orange: #FF9F10; --brand-orange-light: #FFB43A; /* derivados (§1.4): as pontas do gradiente do */ --brand-orange-deep: #EF8500; /* painel de marca do login */ --brand-teal: #0FA3A3; --brand-green: #12A07A; } /* ============================================================ TEMA ESCURO — default do projeto O `:not([data-tema-fixo="light"])` atende as páginas PÚBLICAS claras por construção (booking do profissional, hotpage do estabelecimento): elas nunca tiveram bloco escuro e ficavam claras por acidente, porque só tinham `:root`. Com os tokens, `:root` virou o escuro — então elas declaram `data-tema-fixo="light"` no e ignoram o data-theme que o visitante trouxe salvo do app. Não é preferência de tema: é o desenho da tela (vidro, sombras e cartões são de fundo claro). ============================================================ */ /* ⚠️ ESPECIFICIDADE — não mexa nestes seletores sem refazer a conta. `:not()` SOMA a especificidade do argumento: `:root:not([data-tema-fixo="light"])` vale (0,2,0), enquanto um `[data-theme="light"]` sozinho vale (0,1,0). Com o claro mais fraco, o bloco escuro vencia sempre e o botão de tema virava enfeite — o ícone alternava e a página seguia escura. Por isso o bloco claro carrega um `:not()` só para EMPATAR em (0,2,0): empatado, vence quem vem depois no arquivo, que é o claro. O `[data-tema-fixo="light"]` fica solto em (0,1,0) de propósito: ele só precisa vencer quando o `:not()` do bloco escuro já o excluiu. */ :root:not([data-tema-fixo="light"]), [data-theme="dark"]:not([data-tema-fixo="light"]) { /* Superfícies */ --bg: #060F22; /* fundo da página */ --surface: #0C1932; /* cartão, painel, barra */ --surface-subtle: #101F3D; /* chip/input em repouso */ --border: #1B2C4E; /* borda de cartão, divisor */ /* Texto */ --text: #E7EDFA; /* título e corpo */ --text-muted: #8B9CBC; /* rótulo, legenda, placeholder */ --text-muted-2: #6A82B2; /* derivado (§1.4): o 2º nível de esmaecido que o repo já tinha e o handoff não nomeia */ /* Ação */ --primary: #1A5FDB; /* preenchimento de botão, chip ativa */ --primary-hover: #2A6EE8; --primary-active: #144FBB; --on-primary: #FFFFFF; /* texto sobre --primary */ --primary-text: #8FB6FF; /* NUNCA usar --primary como cor de texto no escuro */ --primary-border: #233E6E; /* botão vazado */ --primary-subtle: #0F2044; /* fundo de botão vazado */ --pill-bg: #16305C; /* pílula/aba selecionada */ --pill-text: #8FB6FF; --focus-ring: #8FB6FF; /* Sidebar do Studio — clara sobre fundo navy (decisão aprovada) */ --side-bg: #CFDEF8; --side-text: #33528F; --side-muted: #6A82B2; --side-name: #12274A; /* Item de menu selecionado — PÍLULA LARANJA (desvio consciente do §4 do handoff, que pedia branco/#1F5FD0: no tema claro aquilo era rgba(255,255,255,.15) sobre navy, 1,40:1, e o usuário não enxergava qual item estava aberto). ⚠️ São DOIS laranjas porque as duas sidebars têm claridades opostas. Aqui a sidebar é CLARA (#CFDEF8), então o laranja da logo (#FF9F10) destacaria só 1,51:1 — a pílula sumiria. O queimado dá 3,59:1 contra a sidebar e 4,88:1 com o texto branco. */ --side-item-active-bg: #B85400; --side-item-active-text: #FFFFFF; /* derivados (§1.4) — a sidebar clara precisa de divisor/hover escuros */ --side-divider: rgba(18, 39, 74, .12); --side-item-hover-bg: rgba(18, 39, 74, .06); --side-card-bg: rgba(255, 255, 255, .55); --side-danger: #C23B3B; /* "Sair" no hover, sobre sidebar clara */ /* Hero / banner de saudação */ --hero-from: #0A1836; --hero-to: #1A4FBE; --hero-title: #FFFFFF; --hero-body: rgba(255, 255, 255, .78); --hero-btn-bg: #FFFFFF; --hero-btn-text: #1A5FDB; --hero-btn-ghost-bg: rgba(255, 255, 255, .16); --hero-btn-ghost-border: rgba(255, 255, 255, .28); /* Ícone decorativo neutro */ --icon-bg: #2B3F66; /* Estado */ --success: #3FD1A6; --success-bg: #0E3A30; --success-border: #1E6E5A; --warning: #FF9F10; /* Cartões coloridos do Resumo: os mesmos gradientes nos dois temas */ --stat-1-from: #2E6EE0; --stat-1-to: #1B52B8; --stat-2-from: #F0863B; --stat-2-to: #E2712B; --stat-3-from: #34C39A; --stat-3-to: #22A57F; --stat-4-from: #8B7BEA; --stat-4-to: #7462DA; --stat-5-from: #8E6FDE; --stat-5-to: #7A57C8; --on-stat: #FFFFFF; } /* ============================================================ TEMA CLARO (ver nota do data-tema-fixo no bloco escuro) ============================================================ */ [data-theme="light"]:not([data-tema-fixo="dark"]), [data-tema-fixo="light"] { /* Superfícies */ --bg: #F4F7FC; --surface: #FFFFFF; --surface-subtle: #F6F8FD; --border: #DBE4F2; /* Texto */ --text: #12274A; --text-muted: #66799B; --text-muted-2: #8B9CBC; /* derivado (§1.4) — ver bloco escuro */ /* Ação */ --primary: #1F5FD0; --primary-hover: #1B54BB; --primary-active: #17489F; --on-primary: #FFFFFF; --primary-text: #1F5FD0; /* texto/ícone azul sobre fundo claro */ --primary-border: #BFD3F5; --primary-subtle: #F1F5FE; --pill-bg: #E4EBFB; --pill-text: #1F5FD0; --focus-ring: #1F5FD0; /* Sidebar do Studio (contraste invertido) */ --side-bg: #12294F; --side-text: #BCC9E4; --side-muted: #7688A9; --side-name: #FFFFFF; /* Item selecionado — aqui a sidebar é NAVY, então entra o laranja da logo em cheio: 7,02:1 contra a sidebar e 7,22:1 com o texto navy. Ver a nota do bloco escuro sobre por que os dois laranjas são diferentes. */ --side-item-active-bg: #FF9F10; --side-item-active-text: #12274A; /* derivados (§1.4) — sidebar navy: divisor/hover claros */ --side-divider: rgba(255, 255, 255, .10); --side-item-hover-bg: rgba(255, 255, 255, .08); --side-card-bg: rgba(255, 255, 255, .08); --side-danger: #FF9090; /* "Sair" no hover, sobre sidebar navy */ /* Hero / banner de saudação */ --hero-from: #12295C; --hero-to: #2668DD; --hero-title: #FFFFFF; --hero-body: rgba(255, 255, 255, .78); --hero-btn-bg: #FFFFFF; --hero-btn-text: #1F5FD0; --hero-btn-ghost-bg: rgba(255, 255, 255, .16); --hero-btn-ghost-border: rgba(255, 255, 255, .28); /* Ícone decorativo neutro */ --icon-bg: #C6D2E6; /* Estado */ --success: #12A07A; --success-bg: #E1F5EE; --success-border: #7ED3BB; --warning: #FF9F10; /* Cartões coloridos do Resumo (mantidos como no app atual) */ --stat-1-from: #2E6EE0; --stat-1-to: #1B52B8; --stat-2-from: #F0863B; --stat-2-to: #E2712B; --stat-3-from: #34C39A; --stat-3-to: #22A57F; --stat-4-from: #8B7BEA; --stat-4-to: #7462DA; --stat-5-from: #8E6FDE; --stat-5-to: #7A57C8; --on-stat: #FFFFFF; } /* ============================================================ MOBILE / app do cliente — tokens adicionais Herda tudo acima. Só o que não existe no web. ============================================================ */ :root:not([data-tema-fixo="light"]), [data-theme="dark"]:not([data-tema-fixo="light"]) { --m-frame: #16264A; /* borda externa do app */ --m-statusbar-bg: #0A1428; --m-statusbar-text:#E7EDFA; --m-search-from: #1A5FDB; /* card "Buscar serviços" */ --m-search-to: #3D82F0; --m-search-glow: rgba(26, 95, 219, .34); --m-search-icon-bg:rgba(255, 255, 255, .22); --m-dash-from: #0B1830; /* hero "BOM DIA" */ --m-dash-to: #12385F; --m-kpi-1-bg: #0F2648; --m-kpi-2-bg: #111F3D; --m-kpi-border: #1D3159; --m-kpi-1-icon-bg: #1B3A6B; --m-kpi-2-icon-bg: #1A2C50; --m-kpi-1-tag-bg: #1A3A6B; --m-kpi-2-tag-bg: #1B2E54; --m-avatar-bg: #0FA3A3; /* teal, acento único */ --m-avatar-text: #FFFFFF; } [data-theme="light"]:not([data-tema-fixo="dark"]), [data-tema-fixo="light"] { --m-frame: #CBD7EA; --m-statusbar-bg: #C9CDD4; --m-statusbar-text:#12274A; --m-search-from: #1F5FD0; --m-search-to: #3E7BE8; --m-search-glow: rgba(31, 95, 208, .28); --m-search-icon-bg:rgba(255, 255, 255, .22); --m-dash-from: #0E1C38; --m-dash-to: #1B3C74; --m-kpi-1-bg: #DCE6FB; --m-kpi-2-bg: #E7ECFA; --m-kpi-border: #CFDDF7; --m-kpi-1-icon-bg: #BFD3F5; --m-kpi-2-icon-bg: #CBD8F3; --m-kpi-1-tag-bg: #CBDCF9; --m-kpi-2-tag-bg: #D7E0F6; --m-avatar-bg: #0FA3A3; --m-avatar-text: #FFFFFF; } /* ============================================================ PONTES PARA OS NOMES LEGADOS As ~50 telas do painel e as 14 do app do cliente já consomem tokens, só que com os nomes da paleta antiga (--accent, --muted, --surface-2, …). Em vez de reescrever milhares de referências (o que seria mudança de estrutura, fora do escopo "apenas cor"), os nomes legados passam a APONTAR para os tokens acima. ⚠️ --accent é o caso delicado: no repo ele é usado ~8x mais como cor de TEXTO do que como preenchimento. Por isso ele vira --primary-text (o azul claro no escuro) e quem precisa de preenchimento usa --accent-fill (= --primary). Ver §2 do handoff. ============================================================ */ :root, [data-theme="dark"], [data-theme="light"] { --surface-2: var(--surface-subtle); --surface-3: var(--primary-subtle); --border-2: var(--primary-border); --accent: var(--primary-text); /* texto/ícone azul → §2 do handoff */ --accent-fill: var(--primary); /* preenchimento → §2 do handoff */ --accent-dim: var(--primary-subtle); --accent-glow: var(--m-search-glow); --muted: var(--text-muted); --muted-2: var(--text-muted-2); --input-bg: var(--surface-subtle); --input-focus: var(--primary-subtle); --sidebar-bg: var(--side-bg); --topbar-bg: var(--surface); --badge-text: var(--on-primary); }