/* ============================================================================= * atrilha — TOKENS * * As custom properties do produto, extraídas do :root de app.css para que o * layout imersivo do estudo (templates/layout/estudo.html) também as enxergue. * Ele NÃO carrega app.css de propósito: o reset do palco vive em :where() * — especificidade zero, deliberada — e perderia para os seletores de elemento * de app.css, deixando todo do palco azul de link, inclusive o X de sair. * * REGRA DURA: aqui só entra declaração de custom property. Nenhuma regra de * comportamento, nenhum seletor além de :root. Quem precisar de regra, põe no * arquivo da sua área. * * Carregado ANTES de app.css (que consome estas variáveis) e ANTES de * estudo-tokens.css (cuja paleta privada precisa continuar vencendo até a * Story 1.3 removê-la). * ============================================================================= */ :root { /* ===== CORES — PRIMITIVOS ===== */ --color-primary-50: #fff1f0; --color-primary-100: #ffd9d6; --color-primary-200: #ffbdb7; --color-primary-300: #ff9a92; --color-primary-400: #fa7b71; --color-primary-500: #ee6c5c; /* coral — bg do botão primário */ --color-primary-600: #e25744; /* coral escuro — hover/pressionado */ --color-primary-700: #bf311e; /* texto sobre coral-soft — 4.63:1 (era #a8362f) */ --color-primary-800: #7c2823; --color-primary-900: #501914; --color-primary-soft: #fbe2dc; /* tint coral quente — tiles/ícone destrutivo */ --color-primary-tint: rgba(238, 108, 92, 0.06); /* fundo da linha destrutiva */ /* Coral escurecido — o único degrau do coral que passa em AA com texto branco (4.85:1 contra 3.03:1 do coral da marca). ESCOPO REDUZIDO por decisão de Dioni (2026-07-29): depois de ver o app rodando, o tom ficou distante demais do vermelho da logo nas superfícies grandes. Botões e aba ativa do dock voltaram ao coral da marca; este degrau segue apenas no ANEL DE FOCO, que é contorno e não preenchimento — ali ele não altera o vermelho percebido e mantém o indicador acima do mínimo de 3:1. Ver a exceção registrada em DESIGN.md · Colors. */ --color-primary-ink: #c9432f; /* Não há `--color-primary-ink-hover`: o degrau existia para o botão primário, que voltou ao coral da marca, e nem o anel de foco nem a borda de input focado têm estado de hover. Correção de um comentário anterior meu: o ink NÃO vive "só no anel de foco" — `--input-border-focus` também aponta para ele e pinta borda sólida de 1px em todo input focado. */ --color-strength-medium: #d89b2a; /* medidor de senha — força média (âmbar) */ --color-strength-strong: #6fb23a; /* medidor de senha — força forte (verde) */ --color-secondary-50: #f2fbe7; --color-secondary-100: #e6f2c9; --color-secondary-200: #d3edae; --color-secondary-300: #beeb6a; --color-secondary-400: #a7d957; --color-secondary-500: #7bc42f; --color-secondary-600: #5da31f; --color-secondary-700: #54741c; /* texto sobre secondary-100 — 4.60:1 */ --color-secondary-800: #2d5a0a; --color-secondary-900: #1e3d06; --color-neutral-0: #ffffff; --color-neutral-50: #f4f1ed; --color-neutral-100: #efeae3; --color-neutral-200: #e7e1d9; --color-neutral-300: #b6ada3; /* DECORATIVO — 1.96:1, nunca texto */ --color-neutral-400: #938a80; /* ícone/ornamento — 3.01:1, nunca texto de leitura */ --color-neutral-500: #736b62; /* texto secundário — 4.65:1 sobre o fundo */ --color-neutral-600: #5c544f; --color-neutral-700: #3d3733; --color-neutral-800: #2a2522; --color-neutral-900: #1a1614; --color-neutral-1000: #0e0b0a; /* Degraus de TEXTO do v2. Existem em vez de repropositar 700/900 porque esses carregam as superfícies escuras de app-dark.css. */ --color-neutral-650: #5c544c; /* texto de corpo — 6.60:1 */ --color-neutral-850: #211c18; /* texto de display — 14.99:1 */ --color-success-100: #e2f4cb; --color-success-500: #7bc42f; --color-success-700: #3f7a0f; --color-warning-100: #fff5dc; --color-warning-500: #d89b1a; --color-warning-700: #9a5a00; --color-danger-100: #fdecea; --color-danger-500: #e45a4f; --color-danger-700: #c8362b; --color-info-100: #eaf7fb; --color-info-500: #1fa8c9; --color-info-700: #0e6c82; --color-heatmap-empty: #efeae3; /* = --color-neutral-100 */ --color-heatmap-1: #ffd9d6; --color-heatmap-2: #fa7b71; --color-heatmap-3: #d94a43; /* ===== CORES — SEMÂNTICOS ===== */ --color-bg: var(--color-neutral-50); --color-surface: var(--color-neutral-0); --color-surface-raised: var(--color-neutral-0); --color-surface-muted: var(--color-neutral-100); --color-border: var(--color-neutral-200); /* v2 funde borda e divisória */ --color-border-strong: var(--color-neutral-400); --color-divider: var(--color-neutral-200); --color-text-display: var(--color-neutral-850); --color-text-body: var(--color-neutral-650); --color-text-muted: var(--color-neutral-500); --color-text-decorative: var(--color-neutral-300); /* separadores e bordas — NUNCA palavra legível */ --color-surface-tab: #f6f3ef; /* aba inativa do dock (Story 2.3) */ --color-surface-today: #fff7f0; /* fundo do cartão do dia de hoje (Story 3.1) */ --color-rule-tab-active: #ffd9cf; /* filete de 4px no topo da aba ativa — decorativo */ --color-text-inverted: var(--color-neutral-0); --color-text-link: var(--color-info-700); --color-primary: var(--color-primary-500); --color-primary-hover: var(--color-primary-600); --color-primary-active: var(--color-primary-600); --color-on-primary: var(--color-neutral-0); --color-focus-ring: var(--color-primary-ink); /* 4.31:1 sobre o fundo; o coral da marca dava 2.69:1 */ /* ===== TIPOGRAFIA ===== */ /* US-117: Hanken Grotesk é texto E display — o app passa a falar a mesma língua tipográfica da landing. Display distingue-se por peso (800), não por família, como nos protótipos da coleção e da bússola. */ --font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Serif de citação: texto bíblico e as peças da coleção (US-117). */ --font-serif: "Newsreader", Georgia, serif; /* Grandezas: ofensiva, XP, contadores. Nunca corpo, rótulo ou título. */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Marca: wordmark da logo e botão primário (Hanken Grotesk 700). */ --font-brand: "Hanken Grotesk", var(--font-sans); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* A família Hanken Grotesk traz 800 e o v2 o consome no display e no rótulo das abas do dock (DESIGN.md · Typography). */ --font-weight-extrabold: 800; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-display: 2.5rem; --tracking-overline: 0.05em; --tracking-tight: -0.01em; /* ===== ESPAÇAMENTO ===== */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-11: 2.75rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ===== RAIOS ===== */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1.25rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* ===== SOMBRAS ===== */ --shadow-none: none; --shadow-sm: 0 1px 2px 0 rgba(26, 22, 20, 0.05); --shadow-md: 0 4px 6px -1px rgba(26, 22, 20, 0.08), 0 2px 4px -2px rgba(26, 22, 20, 0.06); --shadow-lg: 0 10px 15px -3px rgba(26, 22, 20, 0.1), 0 4px 6px -4px rgba(26, 22, 20, 0.06); /* Sombra do dock (v2), lançada para CIMA — é o único elevado que empurra sombra contra o fluxo, porque o dock é chão e o conteúdo passa por baixo. Tem par escuro em app-dark.css: um preto a 7% sobre superfície escura não separa nada, e a separação é a razão de a sombra existir. */ --shadow-dock: 0 -10px 30px rgba(33, 28, 24, 0.07); /* Elevações do Hoje v2. Nasceram como preto literal dentro de hoje-desktop.css e por isso eram invisíveis para a camada de tema: no escuro o cartão que levanta, o balão do Heitor e os fantasmas em VOO perdiam a única pista de profundidade. Todas têm par escuro. */ --shadow-card-hover: 0 10px 24px rgba(33, 28, 24, 0.08); --shadow-bubble: 0 8px 20px rgba(33, 28, 24, 0.06); --shadow-ghost: 0 12px 28px rgba(33, 28, 24, 0.12); /* Anel de foco em DUAS camadas: halo do fundo por dentro, cor por fora. O halo é o que mantém o anel visível quando ele cai sobre uma superfície da mesma família de cor — caso do botão primário, que é coral. Opaco de propósito: o valor antigo era coral a 35% de alpha, e translucidez sobre fundo variável dá contraste variável. */ --shadow-focus: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-focus-ring); /* Sombra do tile da marca: brilho coral difuso que faz o logo "flutuar", ecoando o --button-primary-shadow em escala menor. Aplicada via filter: drop-shadow para respeitar os cantos arredondados do tile. */ --brand-mark-shadow: 0 4px 12px rgba(238, 108, 92, 0.28); /* ===== MOTION ===== */ --duration-fast: 120ms; --duration-base: 240ms; --duration-slow: 400ms; --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ===== Z-INDEX ===== */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; /* Alturas das barras fixas do shell mobile. Existem como TOKEN porque outras * camadas precisam se posicionar em relação a elas — offset de sticky e * scroll-margin de foco (SC 2.4.11) — e um número mágico repetido é como um * deles fica errado sem ninguém ver. * * Os dois valores são a altura RENDERIDA das barras, não o `min-height` * declarado — a distinção custou 1px em cinco lugares. * * O .app-header declara `min-height: 56px`, e o token repetia esse 56. Mas * sob `box-sizing: border-box` o `min-height` é um PISO da caixa inteira, e * o conteúdo passa dele: a `.brand-mark` tem 32px, mais 12+12 de padding * fecha exatamente os 56 da caixa de conteúdo+padding, e a borda inferior de * 1px vai POR FORA disso. Medido no CSS real, em shadow root isolado: 57px. * * Quem consome o token são offsets de sticky (hoje-desktop.css:309, * trilha-desktop.css:252, ajustes-desktop.css:132 e :240, app.css:2331), e * offset de sticky quer a altura de verdade — com 56 sobrava uma fresta de * 1px de conteúdo passando sob o cabeçalho. O dock (:2567, 44px + 8 de * padding + 1 de borda) tem o mesmo formato de conta e já vinha do valor * medido. O equivalente do modo grande é --app-dock-h, declarado em * shell-desktop.css porque o dock só existe lá. */ --app-header-h: 57px; --app-bottom-nav-h: 64px; /* Story 3.1: era 56px */ --z-overlay: 30; --z-modal: 40; --z-toast: 50; /* ===== TOKENS DE COMPONENTE (consumidos por esta US) ===== * doc/UX/02-componentes-base.md §9 */ /* Button */ /* Coral DA LOGO. Texto branco sobre ele dá 3.03:1 e reprova em AA — exceção consciente de Dioni (2026-07-29): identidade acima do contraste neste ponto. Ver DESIGN.md · Colors → "A exceção do botão primário". */ --button-primary-bg: var(--color-primary); --button-primary-bg-hover: var(--color-primary-hover); --button-primary-bg-active: var(--color-primary-active); --button-primary-text: var(--color-on-primary); --button-primary-bg-disabled: #e7e1d9; /* bege neutro — primário desabilitado */ --button-primary-text-disabled: #b6ada3; /* taupe — texto desabilitado */ /* Sombra do primário: brilho coral difuso embaixo (flutuação) + realce interno branco no topo (volume) — coral = rgb(238,108,92) = #ee6c5c. */ --button-primary-shadow: 0 8px 20px rgba(238, 108, 92, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25); --button-primary-height: 54px; --button-primary-font: var(--font-brand); --button-radius: var(--radius-full); --button-padding-x-md: var(--space-4); --button-padding-x-lg: var(--space-6); --button-min-height-md: var(--space-11); /* Input */ --input-bg: var(--color-surface); --input-border: var(--color-border); --input-border-focus: var(--color-focus-ring); --input-radius: var(--radius-md); --input-padding-x: var(--space-4); --input-min-height: var(--space-11); /* Card */ --card-bg: var(--color-surface); --card-radius: var(--radius-lg); --card-padding: var(--space-5); --card-padding-dense: var(--space-4); --card-shadow-raised: var(--shadow-md); --card-shadow-raised-hover: var(--shadow-lg); }