/* Lock to light scheme — phones with OS dark mode were auto-inverting the cream/red palette into something unreadable. Set on directly via the cascade applied through this stylesheet. */ html { color-scheme: light; } :root { --st-grafite: #262626; --st-grafite-dark: #4A4A4A; --st-grafite-darker: #0F0F0F; --st-grafite-soft: #ECECEC; --st-accent: #C9A961; --st-red: #CE1126; --st-red-dark: #A50E1F; --st-red-darker: #7A0A17; --st-red-soft: #FCE5E8; --dp-verde: var(--st-red); --dp-verde-dark: var(--st-red-dark); --dp-verde-darker: var(--st-red-darker); --dp-verde-soft: var(--st-red-soft); --grafite: #1F2326; --grafite-soft: #4F5560; --muted: #6B7280; --muted-dim: #8A8A8A; /* Cream family — alinhado com MonInvoice/MonCreance/MonPanier */ --cream: #FAF6EE; --cream-deep: #F1EAD9; /* body fica em --cream; bandas/section.band ficam em --cream-deep para contrastar; --papel-warm e usado em surfaces que querem ainda mais densidade (legenda de tabela, etc) */ --papel: var(--cream-deep); --papel-warm: var(--cream-deep); --line: #E5DECD; --white: #FFFFFF; --alerta: #D4A72C; --erro: #CE1126; --sucesso: #1F7A3D; /* Tipografia da familia Serenitech: display serif elegante + body sans institucional. Mesma escolha do MonInvoice/MonCreance. */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Marianne', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fs-4xl: 3.25rem; --fs-hero: 4rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.55; --lh-loose: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --container-max: 1280px; --container-narrow: 720px; --container-prose: 640px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(38, 38, 38, 0.06); --shadow-md: 0 4px 12px rgba(38, 38, 38, 0.08); --shadow-lg: 0 12px 32px rgba(38, 38, 38, 0.10); } /* Lang switcher */ .lang-switch { display:flex; gap:0.5rem; align-items:center; font-size:0.875rem; font-family:var(--font-mono); } .lang-switch button { background:none; border:1px solid var(--line); color:var(--muted); padding:0.25rem 0.5rem; border-radius:4px; cursor:pointer; text-transform:uppercase; letter-spacing:0.05em; font-size:0.75rem; } .lang-switch button.active { background:var(--st-red); color:var(--white); border-color:var(--st-red); } .lang-switch button:hover { border-color:var(--st-red); } [data-lang]:not(.lang-active) { display:none; }