/* AABox Managed Business Systems. SupportPal brand override. Loaded after main.min.css. Mirrors public/styles.css from the marketing site. See docs/superpowers/specs/2026-05-29-supportpal-reskin-design.md */ :root { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --fs-display: clamp(2rem, 1.1rem + 2vw, 2.85rem); --fs-h2: clamp(1.4rem, 1rem + 1.2vw, 1.85rem); --fs-h3: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); --fs-lede: clamp(1.06rem, 0.95rem + 0.4vw, 1.2rem); --fs: 1rem; --fs-sm: 0.9rem; --fs-xs: 0.8rem; --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6rem; --r-sm: 2px; --r-md: 4px; --hair: 1px; --rule-strong: 2px; --dur: 160ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1); /* Light palette. Warm bone paper, deep walnut ink. */ color-scheme: light; --bg: #faf6ed; --bg-alt: #f3ecdc; --bg-deep: #ede5d2; --ink: #1a1612; --ink-2: #4a4239; --ink-3: #756a5a; --ink-4: #a39884; --line: #cdbfa3; --line-2: #a89878; --accent: #b8421a; --accent-2: #8e3211; --accent-soft: #f4d8c5; --accent-ink: #5a1f08; --on-accent: #faf6ed; /* Map onto SupportPal vars (light). SupportPal's CSS uses specific stops for specific roles, not a smooth scale. The mapping below is reverse-engineered from inspecting actual SupportPal rules: -800 = default button bg (we want --accent, the rust) -900 = hover button bg (we want --accent-2, the shifted shade) -100 = dark-mode link colour (handled in .sp-theme-dark below) With a 2-shade palette we collapse -300..-800 onto --accent so all primary surfaces read as the same rust, and let -900 carry the hover shift. */ --color-primary-100: var(--accent-soft); --color-primary-200: var(--accent-soft); --color-primary-300: var(--accent); --color-primary-400: var(--accent); --color-primary-500: var(--accent); --color-primary-600: var(--accent); --color-primary-700: var(--accent); --color-primary-800: var(--accent); --color-primary-900: var(--accent-2); --color-background-primary: var(--bg); --color-background-secondary: var(--bg-alt); --color-background-tertiary: var(--bg-deep); --color-text-primary: var(--ink); --color-text-secondary: var(--ink-2); --color-text-tertiary: var(--ink-3); } .sp-theme-dark { color-scheme: dark; --bg: #15110b; --bg-alt: #1c1812; --bg-deep: #221d15; --ink: #f0e6d2; --ink-2: #c4b89e; --ink-3: #8c8470; --ink-4: #5a5446; --line: #2e2920; --line-2: #463f32; --accent: #d96535; --accent-2: #ef7e51; --accent-soft: #2c1a10; --accent-ink: #f4c4a6; --on-accent: #15110b; /* Dark mode: -100 is used by SupportPal for in-content link colour (`a:is(.sp-theme-dark *) { color: var(--color-primary-100) }`). In light mode --accent-soft is a readable pale rust, but in dark mode it's near-black, so dark-mode links rendered invisible. Map dark -100 to --accent so links stay rust-on-walnut and remain legible. The cost is that any `.sp-bg-primary-100` background in dark mode becomes saturated rust instead of soft dark — fine for our minimal palette. */ --color-primary-100: var(--accent); --color-primary-200: var(--accent-soft); --color-primary-300: var(--accent); --color-primary-400: var(--accent); --color-primary-500: var(--accent); --color-primary-600: var(--accent); --color-primary-700: var(--accent); --color-primary-800: var(--accent); --color-primary-900: var(--accent-2); --color-background-primary: var(--bg); --color-background-secondary: var(--bg-alt); --color-background-tertiary: var(--bg-deep); --color-text-primary: var(--ink); --color-text-secondary: var(--ink-2); --color-text-tertiary: var(--ink-3); } /* OS-level dark mode preempt. SupportPal ships `` from the server. The .sp-theme-dark class is added client-side by preload.js. On a cold load the browser canvas defaults to white (because :root has no `color-scheme: dark`) and the inline `colourScheme`