/* SWAT AI Research — Design Tokens Drop into your project and import once (e.g. in your global stylesheet). Light theme is default; add data-theme="dark" on or any container to switch. */ :root { /* ---- Brand (warm core) ---- */ --swat-terracotta: #C0573C; /* primary brand */ --swat-sienna: #A8442C; /* primary, darker / hover / links */ --swat-ochre: #C2853A; /* warm gold (also warning) */ --swat-rust: #8F3B2B; /* deepest warm (also danger) */ --swat-adobe: #D49274; /* soft warm */ /* ---- Earth supports ---- */ --swat-olive: #7A8450; /* secondary */ --swat-moss: #5E6B3A; /* deep olive (also success) */ --swat-sage: #B6BC8E; /* soft olive */ --swat-sandstone: #EAD4B6; /* warm tint / chips */ /* ---- Cool accents (data & state — used sparingly) ---- */ --swat-teal: #3F7E78; /* accent / info */ --swat-deep-teal: #2C5C57; --swat-denim: #5A6E84; /* accent 2 */ --swat-slate-blue: #41526A; /* ---- Warm neutrals ---- */ --swat-white: #FFFFFF; --swat-ivory: #FAF9F5; --swat-cornsilk: #EEDFB8; --swat-paper: #F5F3EC; --swat-bone: #E6DECB; --swat-ash: #B0ADA2; --swat-slate: #6C6B66; --swat-ink: #3D3D3A; --swat-black: #141413; /* ---- Semantic (light) ---- */ --color-bg: var(--swat-paper); --color-surface: #FFFFFF; --color-surface-raised:#FAF9F5; --color-surface-sunken:#EFEADC; --color-border: #E4DDCE; --color-text: #1F1E1B; --color-text-muted: #57564F; --color-text-subtle: #8A887E; --color-primary: #C0573C; --color-primary-hover: #A8442C; --color-primary-active:#8F3B2B; /* filled-button hover/pressed step (darker than -hover) */ --color-on-primary: #FAF9F5; --color-on-danger: #FAF9F5; /* text on --color-danger fills; danger bg does not theme-flip, so this doesn't either */ --color-focus: #C0573C; --color-secondary: #7A8450; /* olive — section accents, data series 2 */ --color-accent: #3F7E78; /* teal — info / cool data */ --color-accent-2: #5A6E84; /* denim — third data series */ --color-success: #5E6B3A; --color-success-bg: #DCE2C4; --color-warning: #C2853A; --color-warning-bg: #EFE0C2; --color-danger: #8F3B2B; --color-danger-bg: #EFD8CF; --color-info: #3F7E78; --color-info-bg: #CFE3DF; /* ---- Spacing (4px base / 8px rhythm) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---- Radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* ---- Elevation (soft, warm-tinted — never gray/hard) ---- */ --elevation-1: 0 1px 2px rgba(40,30,20,0.06), 0 1px 3px rgba(40,30,20,0.08); --elevation-2: 0 4px 8px rgba(40,30,20,0.07), 0 6px 16px rgba(40,30,20,0.09); --elevation-3: 0 10px 20px rgba(40,30,20,0.10), 0 16px 36px rgba(40,30,20,0.12); /* ---- Typography ---- */ /* Load once: https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap */ --font-serif: 'Newsreader', Georgia, serif; /* display / headings */ --font-sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; /* body / UI */ --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* labels / data */ } /* ---- Dark theme ---- */ [data-theme="dark"] { --color-bg: #141413; --color-surface: #1F1E1B; --color-surface-raised:#2A2926; --color-surface-sunken:#0F0F0E; --color-border: #34322E; --color-text: #FAF9F5; --color-text-muted: #B6B3A6; --color-text-subtle: #7C7A70; --color-primary: #C0573C; --color-primary-hover: #D49274; --color-primary-active:#C2853A; /* ochre: darker than -hover(D49274), still >=4.5:1 vs dark on-primary text */ --color-on-primary: #1A1A18; --color-focus: #D49274; --color-secondary: #B6BC8E; /* sage on dark */ --color-accent: #6FAFA8; /* light teal on dark */ --color-accent-2: #A8BACD; /* powder denim on dark */ }