/* ========================================================= VOYAGES & IMAGES — Design tokens Melissa Hallais · Guide & Photographer · Alsace | Black Forest Contrastes medidos (WCAG AA). Não usar hex solto no código. ========================================================= */ :root{ /* ---------- MARCA (valores oficiais do brand) ---------- */ --brand-verde: #064c3f; /* primária · 9.4:1 no marfim · botão com texto branco 9.9:1 */ --brand-amarelo: #FFD23F; /* assinatura · medido no logotipo dela · NUNCA texto sobre claro. Preenchimento com texto preto = 13.1:1 */ --brand-vinho: #CD1256; /* destaque · o rosa do logotipo dela · 5.2:1 no marfim, 5.5:1 com texto branco */ --brand-cinza: #7a6673; /* neutro · 5.0:1 no marfim */ --brand-preto: #111111; /* ---------- FUNDOS ---------- */ --paper: #FBF8F3; /* marfim quente — o fundo do app, nunca branco puro */ --surface: #FFFFFF; /* cartões */ --surface-2: #F2EDE4; /* areia — blocos secundários */ --surface-3: #E8E0D3; --line: #E1DBD9; --line-2: #D0C6C2; /* ---------- TEXTO ---------- */ --ink: #111111; /* 17.8:1 */ --ink-2: #4A4045; /* corpo secundário */ --ink-3: #7a6673; /* legendas · 5.0:1 — mínimo permitido */ /* ---------- AÇÃO ---------- */ --accent: var(--brand-verde); --accent-ink: #FFFFFF; /* texto sobre o verde */ --accent-wash: #e2e7e1; /* fundo de pílula · verde por cima = 7.9:1 */ --accent-line: #b9c8c2; /* O amarelo é a assinatura da marca: preenchimento, nunca texto claro */ --highlight: var(--brand-amarelo); --highlight-ink: #111111; /* 8.7:1 sobre o amarelo */ --highlight-wash: #f6edd3; --highlight-text: #7e6308; /* versão escura para texto · 5.4:1 */ /* ---------- ESTADOS (separados da paleta de marca) ---------- */ --ok: #064c3f; --ok-wash: #e2e7e1; /* pago, confirmado */ --warn: #7e6308; --warn-wash: #f6edd3; /* pendente, vence */ --danger: #a3053f; --danger-wash:#f2e0e1; /* vencido, cancelado */ --neutral: #4A4045; --neutral-wash:#ece6e4; /* ---------- TIPOGRAFIA ---------- */ /* Montserrat = a fonte do logotipo. Karla = leitura. Mono = números. */ --f-display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif; --f-ui: "Karla", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --t-display: 700; /* títulos: peso do logo */ --t-strong: 600; --t-body: 400; /* escala (1.25) */ --fs-9: 44px; --lh-9: 1.04; --fs-8: 34px; --lh-8: 1.08; --fs-7: 27px; --lh-7: 1.14; --fs-6: 22px; --lh-6: 1.22; --fs-5: 18px; --lh-5: 1.35; --fs-4: 15px; --lh-4: 1.55; /* corpo */ --fs-3: 13px; --lh-3: 1.5; --fs-2: 11.5px;--lh-2: 1.45; --fs-1: 10px; --lh-1: 1.4; /* etiquetas mono, maiúsculas, tracking .14em */ --track-display: -0.025em; --track-label: 0.14em; /* ---------- ESPAÇO ---------- Escala de passo 2 até 16px (a interface é densa), depois passo 8. Regra: use o token mais próximo; não invente valores intermediários. */ --s-0:2px; --s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px; --s-6:14px; --s-7:16px; --s-8:20px; --s-9:24px; --s-10:32px; --s-11:40px; --s-12:48px; --s-14:64px; /* ---------- FORMA ---------- */ --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px; /* ---------- ELEVAÇÃO ---------- */ --sh-1: 0 1px 2px rgba(17,17,17,.04), 0 8px 22px -16px rgba(17,17,17,.28); --sh-2: 0 2px 6px rgba(17,17,17,.05), 0 20px 44px -24px rgba(17,17,17,.34); --sh-3: 0 28px 64px -30px rgba(17,17,17,.42); /* ---------- MOVIMENTO ---------- */ --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.4,.5,1); --d-fast: 180ms; --d-base: 260ms; --d-slow: 480ms; } /* Se ela nunca escolheu, o app segue o aparelho. Quem escolheu manda: data-theme fixa e o media query abaixo nao se aplica. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --paper:#0E1512; --surface:#151E1A; --surface-2:#1C2823; --surface-3:#25332D; --line:#25332D; --line-2:#33453D; --ink:#F2F5F2; --ink-2:#B4C0BA; --ink-3:#8A9690; --accent:#4FB89B; --accent-ink:#06231C; --accent-wash:#122C25; --accent-line:#1E4A3E; --highlight:#FFD23F; --highlight-ink:#1A1405; --highlight-wash:#332912; --highlight-text:#FFD23F; --ok:#4FB89B; --ok-wash:#122C25; --warn:#FFD23F; --warn-wash:#332912; --danger:#F0708F; --danger-wash:#331520; --neutral:#B4C0BA; --neutral-wash:#22302A; --sh-1:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -18px rgba(0,0,0,.9); --sh-2:0 2px 8px rgba(0,0,0,.5), 0 24px 50px -26px rgba(0,0,0,.95); --sh-3:0 32px 70px -32px rgba(0,0,0,.95); } } /* Tema escuro — o painel dela à noite. Verde clareia, amarelo se mantém. */ :root[data-theme="dark"]{ --paper:#0E1512; --surface:#151E1A; --surface-2:#1C2823; --surface-3:#25332D; --line:#25332D; --line-2:#33453D; --ink:#F2F5F2; --ink-2:#B4C0BA; --ink-3:#8A9690; --accent:#4FB89B; --accent-ink:#06231C; --accent-wash:#122C25; --accent-line:#1E4A3E; --highlight:#FFD23F; --highlight-ink:#1A1405; --highlight-wash:#332912; --highlight-text:#FFD23F; --ok:#4FB89B; --ok-wash:#122C25; --warn:#E8BC33; --warn-wash:#332912; --danger:#F0708F; --danger-wash:#331520; --neutral:#B4C0BA; --neutral-wash:#22302A; --sh-1:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -18px rgba(0,0,0,.9); --sh-2:0 2px 8px rgba(0,0,0,.5), 0 24px 50px -26px rgba(0,0,0,.95); --sh-3:0 32px 70px -32px rgba(0,0,0,.95); } /* ========================================================= REGRAS QUE NÃO SE QUEBRAM 1. Amarelo nunca é texto sobre fundo claro. Use --highlight-text. 2. Verde é a ação principal. Um botão verde por tela. 3. Vinho é urgência (vencido, últimas vagas). Não decora. 4. Cinza é legenda, nunca título. 5. Números sempre em --f-mono com font-variant-numeric: tabular-nums. 6. Toda cor sai daqui. Hex solto no componente = bug. Exceção única: #fff sobre preenchimento de marca (verde/vinho). 7. Espaçamento sai de --s-*. Valor cru em px = dívida a pagar. 8. Todo controle clicável precisa de :focus-visible próprio ou herdado. 9. Botão só com ícone precisa de aria-label; ícone decorativo, aria-hidden. ========================================================= */