/* tokens.css — Jessica Pereira Designer · PALETA CLARA (Redesign Garak, 2026-06-21) "Estúdio branco": fundo quase-branco, cartões brancos com elevação suave, sidebar GRAFITE como única massa escura, e UM acento — AZUL PETRÓLEO — usado com disciplina em botões, item ativo, links, ícones e detalhes. Fonte: Montserrat. Decisão do Mauricio (substitui a paleta TERRA/areia): FUNDO #FAFAFB · CARTÃO #FFFFFF · SIDEBAR GRAFITE #1F242B · ACENTO #28374A Sem blur, sem glass, sem arco-íris de ícones. Mínimo, claro, elegante. Os nomes de TODAS as variáveis são preservados (todas as views dependem deles); só os VALORES mudaram. Aliases --color-* mantidos por compatibilidade. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap'); :root { /* ─── Superfícies — branco de estúdio + cartões brancos puros ───────── */ --bg: #FAFAFB; /* FUNDO quase-branco do site */ --bg-2: #F3F4F6; /* canto/poço sutil — não é o bg */ --bg-edge: #F3F4F6; --surface: #FFFFFF; /* cartão branco — nível 1 */ --surface-2: #FBFBFC; /* cartão nível 2 / preenchimento de campo */ --surface-3: #F5F6F8; /* hover / topo de cartão / poço claro */ --surface-glass: #FFFFFF; /* SEM vidro: branco sólido (blur abolido) */ --surface-sunken: #F4F5F7; /* poço: track, thumb, campo afundado */ /* ─── Bordas e luz de borda (cinza neutro bem sutil) ───────────────── */ --line: rgba(17,24,39,.09); /* hairline padrão */ --line-strong: rgba(17,24,39,.16); /* borda em hover/foco */ --rim: rgba(255,255,255,.9); /* rim-light: fio de luz no topo */ --rim-strong: rgba(255,255,255,1); /* rim em elemento em foco */ --glass-edge: var(--line); /* sem vidro: vira hairline comum */ /* ─── Mesh de fundo — quase imperceptível, frio e limpo ────────────── */ --bg-mesh: radial-gradient(48% 70% at 8% -16%, rgba(40,55,74,.025), transparent 60%), radial-gradient(54% 72% at 92% -14%, rgba(40,55,74,.020), transparent 62%); /* ─── Tinta (texto) — grafite medido sobre branco ────────────────────── contrastes sobre #FAFAFB / #FFFFFF: */ --ink: #1F2937; /* primária — ~12.6:1 sobre branco (AAA) */ --ink-bright: #111827; /* títulos — ~16:1 (AAA) */ --ink-soft: #374151; /* secundária — ~9.7:1 (AAA) */ --ink-muted: #5B6675; /* muted/legenda — ~5.6:1 (AA) */ --ink-faint: #8A93A1; /* faint — só ícone/decoração, ~3.3:1 */ /* ─── Acento ÚNICO — Azul-petróleo #28374A (botões, ativos, links, ícones) ─ A única cor de destaque do sistema. Usada com disciplina. */ --accent: #28374A; --accent-bright: #324862; /* hover (clareia um pouco) */ --accent-deep: #1C2837; /* pressed / sombra do gradiente */ --accent-grad: linear-gradient(135deg,#324862 0%,#28374A 60%,#1C2837 100%); --accent-hover: #324862; --accent-press: #1C2837; --accent-ink: #F4F7FB; /* tinta clara SOBRE o azul — ~10.5:1 (AAA) */ --accent-soft: rgba(40,55,74,.08); /* wash: chip ativo, nav ativa, foco */ --accent-tint: rgba(40,55,74,.05); --accent-line: rgba(40,55,74,.32); /* borda do acento */ --accent-glow: 0 6px 16px -4px rgba(40,55,74,.30), 0 2px 5px -2px rgba(40,55,74,.22); --accent-glow-soft:0 4px 12px -4px rgba(40,55,74,.20); /* ─── Acento 2 — alias do acento (mantém o azul único; nada de 2ª cor de ação) ─ */ --accent-2: #28374A; --accent-2-bright: #324862; --accent-2-ink: #F4F7FB; --accent-2-soft: rgba(40,55,74,.08); --accent-2-line: rgba(40,55,74,.28); /* ─── Acento 3 — neutro grafite (ícones/secundário; NÃO uma terceira cor) ─── */ --accent-3: #5B6675; --accent-3-bright: #6B7686; --accent-3-ink: #FFFFFF; --accent-3-soft: rgba(91,102,117,.10); --accent-3-line: rgba(91,102,117,.26); /* ─── Status — leem AA sobre branco. Funcionais (semáforo de aprovação), fora do "acento único": vermelho/âmbar/verde reservados a estado real. ── */ --st-rascunho: #5B6675; --st-rascunho-bg: rgba(91,102,117,.12); --st-revisao: #9A6510; --st-revisao-bg: rgba(154,101,16,.12); --st-aguardando: #28374A; --st-aguardando-bg: rgba(40,55,74,.10); --st-aprovado: #1F7A4D; --st-aprovado-bg: rgba(31,122,77,.12); --st-reprovado: #B23B3B; --st-reprovado-bg: rgba(178,59,59,.12); --st-agendado: #2E5E8A; --st-agendado-bg: rgba(46,94,138,.12); /* ─── Alerta e scrim ─────────────────────────────────────────────────── */ --alert: var(--st-reprovado); --alert-bg: var(--st-reprovado-bg); --alert-glow: 0 0 0 1px rgba(178,59,59,.20), 0 4px 16px -6px rgba(178,59,59,.18); --scrim: rgba(17,24,39,.42); /* ─── Logo "Jessica Pereira Designer" sobre branco ────────────────────── */ --logo-seal: linear-gradient(135deg,#324862,#1C2837); --logo-mark: #28374A; --logo-dot: #324862; --logo-wm: #111827; --logo-sub: #28374A; --logo-seal-edge: rgba(17,24,39,.18); /* ─── SIDEBAR — bloco grafite escuro (única massa escura do app) ──────── */ --sidebar-bg: #1F242B; /* carvão */ --sidebar-bg-2: #23282F; /* topo do gradiente sutil */ --sidebar-bg-3: #1A1F25; /* base do gradiente */ --sidebar-ink: #E7EAEF; /* texto/link claro — ~12.8:1 sobre #1F242B */ --sidebar-ink-dim: rgba(231,234,239,.62); /* labels/secundário — AA */ --sidebar-ink-faint: rgba(231,234,239,.45); /* faint */ --sidebar-line: rgba(255,255,255,.08); /* divisórias internas */ --sidebar-hover-bg: rgba(255,255,255,.06); /* hover de item */ /* item ATIVO destacado no azul de acento (mais claro para ler sobre o grafite) */ --sidebar-active-bg: #3B5878; /* azul aceso (sobe do --accent p/ contraste) */ --sidebar-active-ink:#FFFFFF; /* ~6.4:1 sobre o azul aceso (AA) */ /* ─── Tipografia — Montserrat no site inteiro ─────────────────────────── */ --font-display: 'Montserrat', -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Montserrat', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Montserrat', 'SFMono-Regular', ui-monospace, Menlo, monospace; --fraunces: "wght" 700; /* legado: vira peso bold em vez de eixo de serifa */ /* ─── Escala tipográfica ─────────────────────────────────────────────── */ --t-hero: 5rem; /* 80px — número-herói */ --t-mega: 3.25rem; /* 52px — KPI */ --t-h1: 2.125rem; /* 34px — título de palco */ --t-h2: 1.375rem; /* 22px — seção, cliente */ --t-h3: 1.0625rem; /* 17px — card/peça */ --t-body: 0.9375rem; /* 15px */ --t-sm: 0.8125rem; /* 13px */ --t-label: 0.6875rem; /* 11px — label caixa-alta */ --lh-tight: 1.03; --lh-snug: 1.3; --lh-body: 1.55; --track-label: .10em; --track-tight: -.02em; /* ─── Espaçamento (escala 4/8) ───────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --gutter: var(--sp-5); --pad-card: var(--sp-5); --pad-page: clamp(16px, 4vw, 40px); /* ─── Raio ───────────────────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ─── Sombra LIMPA (cinza-azulado neutro, suave) — cartão sobe do branco ── */ --sh-1: 0 1px 2px rgba(17,24,39,.05), 0 1px 3px rgba(17,24,39,.04); --sh-2: 0 1px 2px rgba(17,24,39,.04), 0 8px 18px -8px rgba(17,24,39,.12), 0 22px 40px -24px rgba(17,24,39,.10); --sh-glass: 0 1px 2px rgba(17,24,39,.04), 0 10px 28px -12px rgba(17,24,39,.14); --sh-float: 0 18px 50px -18px rgba(17,24,39,.22); --sh-3: var(--sh-float); /* ─── Movimento ──────────────────────────────────────────────────────── */ --ease: cubic-bezier(.2,0,0,1); --dur: 160ms; --dur-lg: 280ms; /* ─── Layout ─────────────────────────────────────────────────────────── */ --sidebar-w: 244px; --nav-h: 64px; --content-max: 1480px; /* sobe de 1180 → usa a largura em telas grandes (Garak 2026-06-21) */ /* ─── Personalização por cliente ────────────────────────────────────────── A cor do cliente só aparece em UM fio de 3px, no anel do avatar, e num ponto. Nunca em texto, fundo de bloco ou cor de ação (ação = azul). */ --cliente-cor: var(--accent); /* Variáveis de MARCA do portal — fallback no azul do sistema. */ --marca: var(--accent); --marca-seguro: var(--accent-bright); --marca-deep: var(--accent-deep); --marca-bright: var(--accent-bright); --marca-ink: var(--accent-ink); --marca-grad: var(--accent-grad); --marca-grad-btn: linear-gradient(135deg, var(--accent-bright), var(--accent)); --marca-wash: var(--accent-soft); --marca-glow: var(--accent-glow); --marca-mesh: var(--bg-mesh); /* ─── Aliases de compatibilidade (style.css existente) ──────────── */ --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-alt: var(--surface-2); --color-border: var(--line); --color-border-focus: var(--line-strong); --color-text: var(--ink); --color-text-muted: var(--ink-soft); --color-text-xmuted: var(--ink-muted); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-fg: var(--accent-ink); --color-danger: var(--st-reprovado); --color-danger-light: var(--st-reprovado-bg); --color-warning: var(--st-revisao); --color-warning-light: var(--st-revisao-bg); --color-success: var(--st-aprovado); --color-success-light: var(--st-aprovado-bg); --color-info: var(--accent); --color-info-light: var(--accent-soft); /* espaçamentos legacy */ --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6); --space-8: var(--sp-6); --space-10: 40px; --space-12: var(--sp-7); --space-16: var(--sp-8); /* raios legacy */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-full: var(--r-pill); /* sombras legacy */ --shadow-sm: var(--sh-1); --shadow-md: var(--sh-2); --shadow-lg: var(--sh-3); /* tipografia legacy */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --t-xs: var(--t-label); /* alias usado por .pkg-card-tipo */ --text-xs: var(--t-label); --text-sm: var(--t-sm); --text-base: var(--t-body); --text-lg: var(--t-h3); --text-xl: 1.25rem; --text-2xl: var(--t-h2); --text-3xl: var(--t-h1); --leading-tight: var(--lh-tight); --leading-normal: var(--lh-body); --leading-relaxed: 1.625; --transition-fast: var(--dur) var(--ease); --transition-base: var(--dur-lg) var(--ease); /* gradientes legados — agora quase neutros (luz branca sutil no topo) */ --grad-surface: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 40%); --grad-surface-2: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 44%); --grad-raise: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 38%); --line-hi: var(--rim); --line-hi-soft: rgba(255,255,255,.6); } /* ─── Reset mínimo ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background-color: var(--bg); background-image: var(--bg-mesh); background-repeat: no-repeat; background-attachment: fixed; color: var(--ink); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } ::selection { background: var(--accent-soft); color: var(--ink-bright); } /* ─── Foco visível acessível ──────────────────────────────────────── */ :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent-line) !important; border-radius: 6px; } /* Grain de cinema REMOVIDO: o estúdio branco é liso e limpo, sem textura. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }