/* ============================================================ GranaFlow — Design Tokens (DS v1.1, issue #74 · dark #176) Fonte única de verdade para cores, tipografia, raios, sombras, espaçamento e layout de marketing. Valores canônicos: design/tokens/ (colors.md, typography.md, surfaces.md). Não usar hex fora deste arquivo. alterna o tema; o default do 1º acesso vem de prefers-color-scheme (script inline no index.html, antes do primeiro paint). Este arquivo é a FONTE dos tokens e hoje o único lugar onde eles existem. As cópias previstas pelo plano v1.1 (app/public/gf/ tokens.css e landing/public/gf/tokens.css, para consumo fora do React) só passam a existir quando o par for registrado em scripts/sync-design.mjs — ver design/README.md § Pendências. ============================================================ */ :root { color-scheme: light; /* ---- tokens canônicos (design/tokens/colors.md) ---- */ --gf-navy: #0A2A5E; --gf-blue: #1E63D6; --gf-blue-bright: #2B7DF5; --gf-blue-deep: #0B3E96; --gf-gold: #F2B01E; --gf-gold-deep: #E09A0B; --gf-income: #17A66B; --gf-expense: #E5484D; --gf-mist: #EEF1F6; --gf-line: #E3E8F0; --gf-text: #3A4A66; --gf-muted: #8A97AE; /* DEPRECADO (DS v1.1 / DIV-1b): âmbar próprio competia com o ouro na semântica de atenção e não existe no DS. Não usar em código novo. O VALOR fica onde estava de propósito: depreciar é parar de usar, não repintar. Trocá-lo por --gf-gold-deep (#E09A0B) derrubaria o contraste de .settingsWarn (13px/600 sobre card branco) de 5.0:1 para 2.4:1 — regressão de AA entregue por um PR que só deveria mexer em token. O token some quando .settingsWarn e o `border: 1px dashed` de settings/Settings.tsx:365 migrarem — é lá que o peso sobe para 700 e o contraste é reavaliado. */ --gf-warn: #B45309; /* ---- constantes de marca — NÃO invertem no dark ---- (design/tokens/colors.md § Constantes de marca) Superfície de marca é sempre navy escuro, nos dois temas; o que muda é a UI ao redor, não a marca. */ --gf-brand-navy: #0A2A5E; --gf-brand-navy-grad: linear-gradient(150deg, #123B7E, #0A2A5E); --gf-brand-grad: linear-gradient(150deg, #2B7DF5, #0B3E96); --gf-on-brand: #FFFFFF; /* texto sobre superfície de marca */ --gf-on-brand-muted: #AFC0DC; /* texto secundário sobre marca */ --gf-on-brand-dim: #8FA6CE; /* centavos do saldo sobre gradiente */ --gf-on-brand-line: rgba(255, 255, 255, 0.24); --gf-on-brand-accent: #5B9BFF; /* "Flow" do lockup, link sobre navy */ --gf-focus-ring-on-brand: 0 0 0 4px rgba(255, 255, 255, 0.45); /* ---- superfícies e estados (design/tokens/surfaces.md) ---- */ --gf-surface: #FFFFFF; --gf-surface-soft: #F7F9FC; --gf-mist-deep: #E7EBF3; /* fundo do body, um passo abaixo do mist */ --gf-chip: #E9EDF5; /* chips e botões neutros (trilho: --gf-track) */ --gf-track: #DCE3EF; /* trilho de barra de progresso / slider */ --gf-line-soft: #EDF0F6; /* bordas mais suaves que --gf-line */ --gf-line-strong: #D5DEEC; /* borda de controle secundário */ --gf-disabled: #AEB8C9; --gf-danger-soft: #FDECEC; /* fundo de ação destrutiva (texto: expense) */ --gf-income-soft: #E9F7F0; /* fundo de ícone/badge de receita */ --gf-blue-soft: #E7EFFC; /* fundo de seleção suave */ --gf-gold-soft: #FEF6E6; /* badge "Pendente" (texto: --gf-gold-deep) */ --gf-gold-soft-strong: #FEF3D6; /* chip "Meta atingida" (texto: navy) */ /* Tinta de texto sobre fundo SOFT. O tom saturado (--gf-income/--gf-expense/ --gf-gold-deep) só passa AA sobre superfície neutra; sobre o próprio véu claro ele desaba (income 2.84:1, ouro 2.22:1, expense 3.43:1). Estes são os tons escurecidos para texto sobre soft — mesma família de cor, contraste AA. No escuro invertem: o véu é escuro e quem clareia é a tinta. */ --gf-income-ink: #0B6A43; /* sobre --gf-income-soft: 6.0:1 */ --gf-expense-ink: #A82B31; /* sobre --gf-danger-soft: 6.0:1 */ --gf-gold-ink: #7A5207; /* sobre --gf-gold-soft: 6.4:1 */ --gf-brand-ink: #1E63D6; /* sobre --gf-blue-soft: 4.8:1 */ --gf-gold-veil: rgba(242, 176, 30, 0.14); /* bolha decorativa de ouro */ --gf-scrim: rgba(10, 42, 94, 0.55); /* overlay de sheet/modal */ --gf-income-tint: #4FD69C; /* receita sobre fundo escuro/gradiente */ --gf-expense-tint: #FF8A8D; /* despesa sobre fundo escuro/gradiente */ /* ---- preenchimento sólido que CARREGA TEXTO (design/tokens/colors.md) ---- --gf-income/--gf-expense são cores de TEXTO e de traço. Chapados atrás de um rótulo eles reprovam AA (branco sobre #17A66B = 3.1:1, sobre #E5484D = 3.9:1). Quem pinta o fundo de um chip/segmentado selecionado é o par -fill + --gf-on-fill, calibrado nos dois temas: no claro o fundo escurece e o texto é branco; no escuro o fundo é o tom claro do tema e o texto escurece. Continua sendo verde de receita e vermelho de despesa — o invariante de cor não muda, só o contraste passa a fechar. */ --gf-income-fill: #0E7C4F; /* branco sobre ele: 5.2:1 */ --gf-expense-fill: #C0343A; /* branco sobre ele: 5.5:1 */ --gf-on-fill: #FFFFFF; /* texto sobre fill saturado (income/expense/blue) */ /* Anéis de foco: halo suave + TRAÇO OPACO. rgba(...,.14) sozinho compõe 1.2:1 contra a superfície — WCAG 2.4.11/1.4.11 exigem 3:1, ou seja o foco de teclado era invisível em botão, chip, toggle e card. Os dois anéis são compostos de tokens que já invertem, então não têm par no bloco dark. */ --gf-focus-ring: 0 0 0 2px var(--gf-surface), 0 0 0 4px var(--gf-blue); --gf-error-ring: 0 0 0 2px var(--gf-surface), 0 0 0 4px var(--gf-expense); --gf-gold-ring: 0 0 0 2px var(--gf-surface), 0 0 0 4px var(--gf-gold-deep); --gf-gradient: linear-gradient(150deg, var(--gf-blue-bright), var(--gf-blue-deep)); /* ---- ouro: gradiente e variantes (design/tokens/colors.md) ---- Constantes: o ouro não inverte, só o fundo ao redor. */ --gf-gold-bright: #F5C042; /* topo do gradiente ouro */ --gf-gold-grad: linear-gradient(150deg, #F5C042, #F2B01E); --gf-gold-tint: #FFD37A; /* valor em ouro sobre card escuro */ /* ---- neutros de gráfico ---- Reservados para os componentes de gráfico do DS (barra, linha/área, donut), que a v1.1 ainda não porta — ver design/README.md § O que a v1.1 não cobre. A paleta CATEGÓRICA é dado do usuário e não mora aqui; aqui só o chrome neutro. */ --gf-chart-neutral: #C9D6EC; /* barra inativa */ --gf-chart-other: #C3CCDC; /* fatia "Outros" do donut */ /* raios (design/tokens/surfaces.md) */ --r-xs: 9px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-card: 20px; --r-icon: 11px; /* tile de ícone quadrado */ --r-modal: 28px; /* modais e sheets */ --r-pill: 999px; /* chips, badges, toggles */ --r-device: 42px; /* moldura de device (marketing) */ --r-device-screen: 33px; /* tela dentro da moldura */ /* sombras — elevação em navy, nunca em preto */ --shadow-sm: 0 2px 6px rgba(10, 42, 94, 0.3); --shadow-md: 0 4px 10px -6px rgba(10, 42, 94, 0.3); --shadow-card: 0 1px 3px rgba(10, 42, 94, 0.06); --shadow-float: 0 16px 30px -16px rgba(10, 42, 94, 0.45); --shadow-xl: 0 30px 60px -30px rgba(10, 42, 94, 0.55); --shadow-brand: 0 8px 18px -8px rgba(30, 99, 214, 0.7); --shadow-gold: 0 8px 18px -8px rgba(242, 176, 30, 0.8); /* tipografia (design/tokens/typography.md) */ --font: 'Sora', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-num: 'Space Grotesk', var(--font); /* escala tipográfica — invariante de tema */ --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 15px; --fs-xl: 16px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-display: 30px; /* Herói: o MAIOR número do produto (o saldo em `inicio`). Fora da escala até 20/08/2026 — o `.balance` trazia 40px literal, o DS v1.0 especificava 38 e o topo da escala era 30. Três fontes para o mesmo conceito. Consolidado no que estava NO AR: mudar para 30 ou 38 encolheria o saldo de todo mundo, que é mudança de produto. */ --fs-hero: 40px; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* espaçamento (spacing.md pendente — ver design/README.md) — invariante de tema */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 14px; --sp-6: 16px; --sp-7: 20px; --sp-8: 28px; /* aliases históricos — mantidos para as ~480 regras de styles.css */ --pad: var(--sp-7); --gap: var(--sp-4); /* ---- layout e movimento de marketing (spacing.md pendente — ver design/README.md) ---- Consumidos pela landing estática e pelos componentes .gfm-*. Breakpoints (400/600/768/960/1120) NÃO são tokens: media query não lê custom property, e por isso ficam registrados aqui: 400, 600, 768, 960 e 1120px. */ --gf-container: 1120px; --gf-gutter: clamp(20px, 5vw, 32px); --gf-section-y: clamp(48px, 9vw, 96px); --gf-measure: 62ch; --gf-fs-display: clamp(30px, 7.5vw, 44px); --gf-fs-h1: clamp(24px, 5.5vw, 30px); --gf-fs-h2: clamp(19px, 4vw, 22px); --gf-fs-lead: clamp(16px, 3.6vw, 18px); --gf-dur: 200ms; --gf-dur-fast: 120ms; --gf-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* app frame */ --app-max: 480px; } /* ============================================================ Tema escuro (issue #176) — valores da paleta dark do DS mapeados para os tokens do app. --gf-navy vira o texto forte (claro); --gf-blue-bright/--gf-blue-deep são constantes de marca e não mudam. Também não invertem: as constantes de marca (--gf-brand-*, --gf-on-brand-*), as variantes de ouro (--gf-gold-bright/-grad/-tint/-veil), a geometria (--r-*, --sp-*, --fs-*) e o layout de marketing. Os tints (--gf-income-tint/--gf-expense-tint) já foram desenhados para fundo escuro/gradiente e valem nos dois temas. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --gf-navy: #E8EEF7; --gf-blue: #3B82F6; --gf-gold: #F5C042; --gf-gold-deep: #F2B01E; --gf-income: #34D399; --gf-expense: #F87171; --gf-warn: #FBBF24; /* DEPRECADO — ver o bloco claro */ --gf-mist: #0A1424; --gf-line: #24385C; --gf-text: #B4C2D8; --gf-muted: #8FA0BC; --gf-surface: #13233D; --gf-surface-soft: #0F1D33; --gf-mist-deep: #060E1C; --gf-chip: #1B2E4D; --gf-track: #1E3252; --gf-line-soft: #1E3252; --gf-line-strong: #2E466E; --gf-disabled: #55688C; --gf-danger-soft: rgba(248, 113, 113, 0.14); --gf-income-soft: rgba(52, 211, 153, 0.14); --gf-blue-soft: rgba(59, 130, 246, 0.18); --gf-gold-soft: rgba(245, 192, 66, 0.14); --gf-gold-soft-strong: rgba(245, 192, 66, 0.22); --gf-scrim: rgba(0, 0, 0, 0.62); --gf-gradient: linear-gradient(150deg, #1B3B6E, #0E1E38); /* Preenchimento sólido: no escuro o fundo é o tom CLARO do tema e quem escurece é o texto (#060E1C sobre #34D399 = 10.1:1, sobre #F87171 = 7.0:1, sobre #3B82F6 = 5.3:1). Os anéis de foco não aparecem aqui: são compostos de --gf-surface/--gf-blue/--gf-expense/--gf-gold-deep, que já invertem neste bloco. */ --gf-income-fill: var(--gf-income); --gf-expense-fill: var(--gf-expense); --gf-on-fill: var(--gf-mist-deep); /* Tinta sobre soft — aqui o véu é escuro, então a tinta CLAREIA. Os tons saturados do dark já passam sobre o próprio véu (income 6.1:1, ouro 6.1:1, expense 4.7:1); só o azul não passa (#3B82F6 sobre o véu dá 3.4:1), e por isso ganha um tom próprio. */ --gf-income-ink: var(--gf-income); --gf-expense-ink: var(--gf-expense); --gf-gold-ink: var(--gf-gold-deep); --gf-brand-ink: #7EAEFA; /* sobre --gf-blue-soft no escuro: 5.5:1 */ --gf-chart-neutral: #2E466E; --gf-chart-other: #55688C; /* sombras — em preto no dark (navy some contra o fundo escuro) */ --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 10px -6px rgba(0, 0, 0, 0.5); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-float: 0 16px 30px -16px rgba(0, 0, 0, 0.7); --shadow-xl: 0 30px 60px -30px rgba(0, 0, 0, 0.75); --shadow-brand: 0 8px 18px -8px rgba(30, 99, 214, 0.55); --shadow-gold: 0 8px 18px -8px rgba(242, 176, 30, 0.6); } /* reset compartilhado */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } body { background: var(--gf-mist-deep); font-family: var(--font); color: var(--gf-navy); } .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }