/* ============================================================================ BRAND TOKENS · The SOS Agency — SINGLE SOURCE OF TRUTH (colors + fonts) ---------------------------------------------------------------------------- This file is the ONE place the brand palette and font families are defined. It lives in /public (stable URL) so BOTH consumers can share it: · the Astro site — linked in src/layouts/Layout.astro · the Decap admin — @imported by public/admin/chrome.css and preview.css Do NOT redeclare these values anywhere else. src/styles/tokens.css keeps the layout tokens (spacing, type scale, radius, shadows, motion) and relies on the variables defined here. Palette reference + WCAG matrix: docs/brand/SOS_Color_System.md Composition rule: when peach and carvão meet, peach goes BEHIND (surface) and carvão goes IN FRONT (text). Never the inverse. Peach buttons use paper text (--color-text-on-accent), per Andréa 2026-06-10. ============================================================================ */ :root { /* ── Brand palette · the official 7 swatches (raw values) ── Prefer the semantic tokens below in components. */ --brand-paper: #fbfaf8; /* off-white, default page bg */ --brand-cream: #f8e6dc; /* peach-tinted neutral, warm section surfaces */ --brand-peach: #d97757; /* signature terracotta, accent / CTA bg */ --brand-terracotta: #d25c3d; /* mid terracotta, DECORATION ONLY (no text) */ --brand-brick: #a3352b; /* deep brick, accent text on light, CTA bg */ --brand-wine: #391211; /* near-black wine, strongest text, dark surfaces */ --brand-ink: #242424; /* carvão, primary text, inverse bg */ --brand-white: #ffffff; /* Off-palette neutral, cooler alt surface. Use sparingly. */ --brand-sage: #efeeea; /* 60%, dominant neutrals */ --color-bg: var(--brand-paper); --color-surface: var(--brand-cream); --color-surface-2: var(--brand-sage); --color-text: var(--brand-ink); /* #242424 on paper = 14.88 AAA */ --color-text-strong: var(--brand-wine); /* #391211 on paper = 15.87 AAA */ --color-text-on-accent: var(--brand-paper); /* paper on peach: AA Large only — keep ≥18pt or 14pt bold */ /* 30%, secondary / structural warm grays (tuned for AAA over paper) */ --color-text-muted: #4a4540; /* ~9:1 over paper, AAA */ --color-text-subtle: #6b6560; /* ~5.2:1 over paper, AA */ --color-border: #e5e2db; --color-border-strong: #c7c2b8; /* 10%, accent (CTAs, highlight blocks, focus rings) — SPARINGLY */ --color-accent: var(--brand-peach); --color-accent-hover: var(--brand-terracotta); /* decorative hover step only */ --color-accent-soft: var(--brand-cream); /* accent washes */ --color-accent-strong: var(--brand-brick); /* brick, pressed/active, text on light */ /* Inverse surfaces (footer, dark hero blocks) */ --color-bg-inverse: var(--brand-ink); --color-surface-inverse: var(--brand-wine); --color-text-inverse: var(--brand-paper); --color-text-inverse-muted: var(--brand-cream); --color-border-inverse: #3a3a3a; /* Semantic status, tuned to clear AA over paper */ --color-success: #2f6b3a; --color-warning: #a85e10; --color-error: var(--brand-brick); /* #A3352B on paper = 6.49 AA */ /* Focus ring (visible, accessible) */ --color-focus-ring: var(--brand-ink); /* ── Font families ── Faces declared in /public/styles/brand-fonts.css (self-hosted). */ --font-display: "Averia Serif Libre", Georgia, "Times New Roman", serif; --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }