/* Design tokens — aligned to the Praxian institutional site (praxian.com.br) so the "Praxian AI Center" business-unit page reads as the same brand: navy primary + orange accent, instead of the former standalone green. Dark mode is toggled by a `.dark` class on (see js/theme.js), matching the original's next-themes strategy. */ :root { /* Praxian brand palette — the only colors this codebase may use. */ --color-brand-primary: #043d80; --color-brand-secondary: #f39d36; --color-brand-grey-600: #757575; --color-brand-grey-300: #c5c5c5; --color-brand-grey-50: #f8f8f8; --color-brand-white: #ffffff; --color-brand-divider: #e3e3e3; /* Semantic tokens — everything else consumes these, never raw brand-*. */ --color-surface: var(--color-brand-white); --color-surface-alt: var(--color-brand-grey-50); --color-surface-inverse: var(--color-brand-primary); --color-ink: var(--color-brand-primary); --color-ink-muted: var(--color-brand-grey-600); --color-ink-inverse: var(--color-brand-white); --color-ink-inverse-muted: var(--color-brand-grey-300); --color-border: var(--color-brand-divider); --color-border-strong: var(--color-brand-grey-300); --color-accent: var(--color-brand-secondary); --font-sans: "Source Sans 3", "Source Sans Pro", Arial, Calibri, Helvetica, sans-serif; --container-content: 80rem; } html.dark { --color-surface: var(--color-brand-primary); --color-surface-alt: #062a54; --color-surface-inverse: var(--color-brand-white); --color-ink: var(--color-brand-white); --color-ink-muted: var(--color-brand-grey-300); --color-ink-inverse: var(--color-brand-primary); --color-ink-inverse-muted: var(--color-brand-grey-600); --color-border: #0d3a6b; --color-border-strong: var(--color-brand-secondary); --color-accent: #ffb35c; } @media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { --color-surface: var(--color-brand-primary); --color-surface-alt: #062a54; --color-surface-inverse: var(--color-brand-white); --color-ink: var(--color-brand-white); --color-ink-muted: var(--color-brand-grey-300); --color-ink-inverse: var(--color-brand-primary); --color-ink-inverse-muted: var(--color-brand-grey-600); --color-border: #0d3a6b; --color-border-strong: var(--color-brand-secondary); --color-accent: #ffb35c; } }