/* ================================================================ Design tokens — fonte única de identidade visual da plataforma. Carregado ANTES de app.css (/app) e admin.css (/admin). Não definir cores fora daqui; telas usam os aliases semânticos. Etapa E1 (redesign handoff, 2026-07): tokens novos adotados do handoff (docs/design-handoff/design-tokens.css). Tema é 100% controlado por [data-theme="light"|"dark"] no (ver public/app/theme.js) — tema NUNCA é decidido por media query de preferência de cor do SO neste arquivo. ================================================================ */ /* ---- Fontes self-host (subset latin, woff2) ---- PWA offline + zero request ao Google Fonts (bônus LGPD). O /app faz preload dos arquivos críticos no layout-top. Instrument Serif e Plus Jakarta Sans seguem aqui porque /admin ainda depende deles (fora do escopo desta trilha). */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-400.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/plus-jakarta-sans.woff2') format('woff2'); } :root { /* Superfícies / fundos */ --bg: #F3F1F9; /* fundo do app */ --bg-elev: #EBE8F4; /* backdrop / trás do frame mobile */ --surface: #FFFFFF; /* cards, sidebar */ --surface-2: #F7F5FC; /* inputs, chips neutros */ --surface-3: #F0EDF8; /* trilhos de progresso */ /* Tinta / texto */ --ink: #1A1B3A; /* texto principal (navy da logo) */ --ink-2: #5C5D78; /* texto secundário */ --ink-3: #9A9AAC; /* texto terciário / legendas */ /* Linhas */ --line: rgba(26,27,58,.09); --line-2: rgba(26,27,58,.05); /* Marca */ --brand: #1A1B3A; /* navy institucional */ /* Acento principal (lilás — ponte navy↔rosé) */ --accent: #6E5AA6; --accent-2: #8B77C6; --accent-soft: #ECE7F7; /* Azul (da logo) */ --blue: #5E82B3; --blue-ink: #3E5C89; --blue-soft: #E7EEF8; /* Rosé (da logo) */ --rose: #B87888; --rose-ink: #8E4A5C; --rose-soft: #F6E9EC; /* Semânticos */ --good: #2E7358; --good-soft: #E4F1EB; --warn: #8A6200; --warn-soft: #F6ECDA; /* Botão primário */ --btn-bg: #1A1B3A; --btn-fg: #FFFFFF; /* Moldura do device (mobile PWA) */ --frame: #E0DCEC; /* Sombras */ --shadow-sm: 0 1px 2px rgba(26,27,58,.05), 0 1px 3px rgba(26,27,58,.04); --shadow: 0 1px 2px rgba(26,27,58,.04), 0 10px 30px rgba(26,27,58,.07); --shadow-lg: 0 4px 12px rgba(26,27,58,.06), 0 24px 60px rgba(26,27,58,.12); --glow: radial-gradient(120% 120% at 50% 0%, rgba(139,119,198,.16), transparent 60%); /* Tipografia */ --font-serif: 'EB Garamond', 'Garamond', serif; /* títulos */ --font-sans: 'Mulish', system-ui, sans-serif; /* interface */ /* Raios */ --r-sm: 10px; --r-md: 13px; --r-lg: 18px; --r-xl: 20px; --r-2xl: 26px; /* Espaçamento (escala base 4px) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; } [data-theme="dark"] { --bg: #0E0F22; --bg-elev: #0A0B1B; --surface: #181A34; --surface-2: #1F2140; --surface-3: #24264A; --ink: #ECEBF6; --ink-2: #AEB0CC; --ink-3: #787A9C; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.05); --brand: #ECEBF6; --accent: #A897DE; --accent-2: #8B77C6; --accent-soft: rgba(139,119,198,.20); --blue: #8FB0DD; --blue-ink: #A9C4E8; --blue-soft: rgba(94,130,179,.20); --rose: #D6A2B0; --rose-ink: #E2B7C2; --rose-soft: rgba(184,120,136,.22); --good: #5FBE9B; --good-soft: rgba(63,143,114,.20); --warn: #D6AD6C; --warn-soft: rgba(184,134,62,.20); --btn-bg: #A897DE; --btn-fg: #15162E; --frame: #26284A; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.45); --shadow-lg: 0 6px 18px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.55); --glow: radial-gradient(120% 120% at 50% 0%, rgba(168,151,222,.14), transparent 60%); } /* ===== ALIASES LEGADOS (mantidos para o /admin) ===== Trilha D (E5.3): o /app foi 100% migrado para os nomes NOVOS de token — grep de tokens antigos em views/app + public/app + public/css/pages = 0. Estes aliases (nomes antigos -> novos) permanecem porque a area /admin (18 telas, FORA do escopo desta trilha; spec: "admin nao e tocado") carrega este arquivo e o admin.css ainda usa os nomes antigos. Remover estes aliases QUEBRARIA o /admin. Migrar o /admin para os nomes novos e remover este bloco fica como tarefa futura separada. (O site publico define seus proprios --lilac-* em styles.css, entao nao depende destes aliases.) */ :root { /* Aliases -> tokens novos (herdam claro/escuro automaticamente) */ --cream: var(--bg); --paper: var(--surface); --bg-app: var(--bg); --card: var(--surface); --text: var(--ink); --muted: var(--ink-2); /* Legado usava --brand = lilás interativo (não o navy institucional do set novo). Aliasar p/ --accent mantém botões/links legíveis nos 2 temas até a E2 reescrever os componentes com --btn-bg/--btn-fg. O navy institucional continua disponível como --ink / --brand (novo) onde for preciso. */ --brand: var(--accent); --brand-soft: var(--accent-soft); --lilac-50: var(--accent-soft); --lilac-100: var(--accent-soft); --lilac-200: var(--accent-soft); --lilac-400: var(--accent-2); --lilac-500: var(--accent); --lilac-700: var(--accent); --blue-50: var(--blue-soft); --blue-100: var(--blue-soft); --blue-200: var(--blue-soft); --blue-400: var(--blue); --blue-700: var(--blue-ink); --pink-50: var(--rose-soft); --pink-100: var(--rose-soft); --pink-200: var(--rose-soft); --pink-400: var(--rose); --pink-700: var(--rose-ink); --green-50: var(--good-soft); --green-100: var(--good-soft); --green-200: var(--good-soft); --green-400: var(--good); --green-700: var(--good); --danger: var(--rose-ink); --ok: var(--good); --info: var(--blue-ink); --font-ui: var(--font-sans); --font-display: var(--font-serif); /* Carry-forward (sem equivalente novo — valores literais do tokens.css antigo) */ --radius: 14px; --radius-sm: 8px; --radius-lg: 20px; --radius-full: 999px; --shadow-card: 0 1px 3px rgba(31, 26, 58, .08); --shadow-md: 0 4px 12px rgba(31, 26, 58, .10); --border: var(--line); --border-strong: var(--line); --hover: var(--accent-soft); --active: var(--accent-soft); --focus-ring: 0 0 0 3px var(--accent-soft); --ok-text: #3F6B10; --danger-text: #B23A64; --warn-text: #8A6200; --t-fast: 120ms ease; --t-base: 200ms ease; --sidebar-w: 244px; --bottomnav-h: 76px; --header-h: 56px; --sp-7: 32px; /* Escala tipográfica legada (sem equivalente no set novo) */ --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-base: 1.5; --lh-loose: 1.7; } /* COMPAT dark: carry-forward que tinham valor específico no dark do tokens.css antigo (o antigo usava media query de SO; agora é 100% [data-theme]). */ [data-theme="dark"] { --border: #322A4C; --border-strong: #443A66; --hover: #2A2244; --active: #322A4C; --ok-text: #A8D06A; --danger-text: #F2A2BE; --warn-text: #E4C468; --shadow-card: 0 1px 3px rgba(0, 0, 0, .4); --shadow-md: 0 4px 12px rgba(0, 0, 0, .4); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; } }