/* ============================================================================ Cairn — brand tokens (extracted verbatim from the app's theme system: cairn-app/theme/index.tsx). Drop this into the website and use the CSS variables everywhere. :root = light. Dark mode activates either by the OS setting (prefers-color-scheme) OR by setting . ============================================================================ */ :root { /* surfaces */ --paper: #F3EEE4; /* page background (warm parchment) */ --paper2: #ECE5D8; --surface: #FBF8F2; /* cards */ --surface-hi: #FFFFFF; /* inputs / elevated */ /* ink (text) */ --ink: #23262E; /* primary text */ --ink2: #5E5B52; /* secondary */ --ink3: #938D7E; /* tertiary / captions */ --line: #E4DECF; /* hairline borders */ --line2: #D8D0BD; /* indigo — primary brand / actions */ --indigo: #2E4574; --indigo2: #3A5488; --indigo-deep: #1E2E4F; --indigo-tint: #E7EBF3; --indigo-tint2: #DCE2EE; /* sage — reflection / gratitude */ --sage: #6E8E6A; --sage-tint: #E8EFE6; /* gold — answered stones / Cairn+ */ --gold: #C8A24A; --gold-deep: #A77F2C; --gold-tint: #F4EAD0; /* amber — warmth / capture */ --amber: #D98C4A; --amber-deep: #B96E30; --amber-tint: #F6E6D4; /* misc accents */ --open-fill: #ECE6D8; --open-stroke: #C2BAA6; --rose: #B5675F; --rose-tint: #F3E4E0; --glass: rgba(255, 255, 255, 0.70); --tabbar-bg: rgba(251, 248, 242, 0.86); --card-warm-1: #FCF6E9; --card-warm-2: #FBF8F2; --landscape-opacity: 1; /* radii (px) */ --r-sm: 10px; --r-md: 14px; --r-lg: 16px; --r-xl: 18px; --r-card: 22px; --r-pill: 999px; /* type */ --font-serif: "Spectral", Georgia, "Times New Roman", serif; /* headlines */ --font-sans: "Hanken Grotesk", -apple-system, system-ui, sans-serif; /* body */ /* brand gradients — IDENTICAL in light & dark (designed to read on both) */ --grad-button: linear-gradient(165deg, #3A5488, #2E4574); --grad-hero: linear-gradient(180deg, #3A5488, #2E4574, #223658); --grad-fab: linear-gradient(180deg, #3A5488, #2E4574, #26396180); /* section "wash" backgrounds (top -> bottom) */ --wash-warm: linear-gradient(180deg, #FCF4E2, #F3EEE4); --wash-declare: linear-gradient(180deg, #E7EAF3, #E9EFE6, #F3EEE4); --wash-sage: linear-gradient(180deg, #E8EFE6, #F3EEE4); --wash-dawn: linear-gradient(180deg, #E7EAF3, #EFE7D9, #F3EEE4); --wash-cool: linear-gradient(180deg, #E7EAF3, #F3EEE4); --wash-airy: linear-gradient(180deg, #FCFAF5, #FCFAF5); } /* ---- DARK: explicit override ---- */ :root[data-theme="dark"] { --paper: #14171F; --paper2: #1A1E27; --surface: #1C212B; --surface-hi: #232A35; --ink: #F1ECE2; --ink2: #B3AD9F; --ink3: #837D6F; --line: #2A2F3A; --line2: #363C48; --indigo: #A9BCE0; --indigo2: #B7C7E8; --indigo-deep: #C9D5EE; --indigo-tint: #232F49; --indigo-tint2: #2E3C58; --sage: #9DBE97; --sage-tint: #1E2A22; --gold: #D7B05C; --gold-deep: #E3BD6A; --gold-tint: #2A2316; --amber: #E0975A; --amber-deep: #E8A266; --amber-tint: #2A1E12; --open-fill: #262B36; --open-stroke: #4A5160; --rose: #DB938B; --rose-tint: #2E1C19; --glass: rgba(42, 48, 60, 0.72); --tabbar-bg: rgba(18, 21, 28, 0.86); --card-warm-1: #241E12; --card-warm-2: #1C212B; --landscape-opacity: 0.22; --wash-warm: linear-gradient(180deg, #221D12, #14171F); --wash-declare: linear-gradient(180deg, #1C2336, #18211C, #14171F); --wash-sage: linear-gradient(180deg, #18221C, #14171F); --wash-dawn: linear-gradient(180deg, #1C2336, #201D15, #14171F); --wash-cool: linear-gradient(180deg, #1C2336, #14171F); --wash-airy: linear-gradient(180deg, #15181F, #15181F); } /* ---- DARK: follow the OS when no explicit theme is set ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #14171F; --paper2: #1A1E27; --surface: #1C212B; --surface-hi: #232A35; --ink: #F1ECE2; --ink2: #B3AD9F; --ink3: #837D6F; --line: #2A2F3A; --line2: #363C48; --indigo: #A9BCE0; --indigo2: #B7C7E8; --indigo-deep: #C9D5EE; --indigo-tint: #232F49; --indigo-tint2: #2E3C58; --sage: #9DBE97; --sage-tint: #1E2A22; --gold: #D7B05C; --gold-deep: #E3BD6A; --gold-tint: #2A2316; --amber: #E0975A; --amber-deep: #E8A266; --amber-tint: #2A1E12; --open-fill: #262B36; --open-stroke: #4A5160; --rose: #DB938B; --rose-tint: #2E1C19; --glass: rgba(42, 48, 60, 0.72); --tabbar-bg: rgba(18, 21, 28, 0.86); --card-warm-1: #241E12; --card-warm-2: #1C212B; --landscape-opacity: 0.22; --wash-warm: linear-gradient(180deg, #221D12, #14171F); --wash-declare: linear-gradient(180deg, #1C2336, #18211C, #14171F); --wash-sage: linear-gradient(180deg, #18221C, #14171F); --wash-dawn: linear-gradient(180deg, #1C2336, #201D15, #14171F); --wash-cool: linear-gradient(180deg, #1C2336, #14171F); --wash-airy: linear-gradient(180deg, #15181F, #15181F); } }