/** * Stormy CMS design tokens * * Color variables follow the AIR naming convention: * * --color-{affiliation}-{id}[-{variation}][-c] * * - Affiliation groups colors by purpose (brand, site, accent, success, …). * - ID distinguishes base colors within an affiliation (1 = primary, 2 = secondary, …). * - A trailing number denotes an aesthetic variation of the base color. * - A trailing `-c` denotes the color's designated contrast partner * (readable when one is layered on the other, in either direction). * * Apply `.theme--light` or `.theme--dark` anywhere in the tree — typically on * or . Nesting the opposite class deeper in the tree re-themes * that subtree, shadow DOM included. */ .theme--light, .theme--dark { /* ------------------------------------------------ brand (theme-invariant) */ --color-brand-1: #71b5db; /* storm blue */ --color-brand-1-c: #110c14; --color-brand-1-1: #b8e0f7; /* lightning highlight */ --color-brand-1-2: #8f7bb0; /* violet-blue blend */ --color-brand-2: #413451; /* thundercloud violet */ --color-brand-2-c: #ffffff; /* ------------------------------------------------ typography */ --font-brand: 'Montserrat Alternates', ui-sans-serif, system-ui, sans-serif; --font-site: 'Montserrat', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace; /* ------------------------------------------------ shape */ --radius-1: 0.5rem; --radius-2: 0.875rem; --radius-3: 1.375rem; --radius-round: 999px; /* ------------------------------------------------ composites */ --gradient-brand: linear-gradient(105deg, var(--color-brand-1-1), var(--color-brand-1) 45%, var(--color-brand-1-2)); } .theme--dark { color-scheme: dark; /* site: backgrounds, text, and lines */ --color-site-1: #110c14; /* page background */ --color-site-1-1: #181021; /* surface */ --color-site-1-2: #1f1629; /* raised surface */ --color-site-1-3: #291d32; /* deep surface / gradient tone */ --color-site-1-c: #ffffff; /* high-contrast text (headings) */ --color-site-1-c-1: #ece8f2; /* body text */ --color-site-1-c-2: #aaa1b8; /* dimmed text */ --color-site-2: color-mix(in srgb, #aaa1b8 16%, transparent); /* subtle line */ --color-site-2-1: color-mix(in srgb, #71b5db 35%, transparent); /* interactive line */ /* accent: links, focus, primary actions */ --color-accent-1: #71b5db; --color-accent-1-1: #b8e0f7; /* hover */ --color-accent-1-c: #110c14; /* status */ --color-success-1: #7fd6a4; --color-success-1-c: #0c1f14; --color-error-1: #e5484d; --color-error-1-c: #ffffff; --color-warning-1: #f0c98d; --color-warning-1-c: #241a06; --color-info-1: #71b5db; --color-info-1-c: #0d1b24; /* elevation */ --shadow-1: 0 30px 60px -30px rgb(0 0 0 / 0.7); --shadow-glow: 0 0 24px color-mix(in srgb, var(--color-accent-1) 35%, transparent); } .theme--light { color-scheme: light; /* site: backgrounds, text, and lines */ --color-site-1: #fdfcfe; /* page background */ --color-site-1-1: #f4f1f8; /* surface */ --color-site-1-2: #ece7f3; /* raised surface */ --color-site-1-3: #e2dbec; /* deep surface / gradient tone */ --color-site-1-c: #14101a; /* high-contrast text (headings) */ --color-site-1-c-1: #2b2436; /* body text */ --color-site-1-c-2: #6b6180; /* dimmed text */ --color-site-2: color-mix(in srgb, #413451 16%, transparent); /* subtle line */ --color-site-2-1: color-mix(in srgb, #2b7fae 40%, transparent); /* interactive line */ /* accent: links, focus, primary actions (darkened for AA contrast on light) */ --color-accent-1: #2b7fae; --color-accent-1-1: #1f6a95; /* hover */ --color-accent-1-c: #ffffff; /* status */ --color-success-1: #1a7f4e; --color-success-1-c: #ffffff; --color-error-1: #d92d20; --color-error-1-c: #ffffff; --color-warning-1: #b45309; --color-warning-1-c: #ffffff; --color-info-1: #216f9c; --color-info-1-c: #ffffff; /* elevation */ --shadow-1: 0 24px 48px -24px rgb(38 27 52 / 0.25); --shadow-glow: 0 0 24px color-mix(in srgb, var(--color-accent-1) 30%, transparent); }