/* ═════════════════════════════════════════════
Better Prompted — Brand Variables
Import or paste into your landing page stylesheet.
All UI colors should flow through these — never
hardcode hex values that need to invert.
═════════════════════════════════════════════ */
:root {
color-scheme: light dark;
/* Surfaces */
--bg: #FAFAF9; /* page background */
--surface: #FFFFFF; /* cards, elevated surfaces */
/* Text */
--ink: #0A0A0A; /* primary text, headlines */
--ink-soft: #171717; /* hover states of ink elements */
--mid: #404040; /* body text, supporting copy */
--mute: #6B6B6B; /* small labels, captions */
/* Lines */
--line: #E5E5E5; /* borders, dividers */
--line-hover: #D4D4D4; /* hover borders */
/* Accents */
--accent: #06B6D4; /* cyan — brand mark, graphic elements */
--accent-deep: #0E7490; /* dark cyan — text accents on light bg */
--accent-hover: #0891B2; /* hover on cyan interactive elements */
/* Type */
--font: "General Sans", -apple-system, system-ui, sans-serif;
}
/* ─── Dark mode ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A0A0A;
--surface: #171717;
--ink: #FAFAF9;
--ink-soft: #F5F5F4;
--mid: #A3A3A3;
--mute: #737373;
--line: #262626;
--line-hover: #3F3F3F;
--accent: #06B6D4;
--accent-deep: #67E8F9; /* lighter cyan for readable text on dark bg */
--accent-hover: #22D3EE;
}
}
/* ─── Required meta tags in the HTML ─── */
/*
*/
/* ─── Color usage rules ──────────────────────────
- The wordmark "better prompted" is always var(--ink). Never cyan.
- The mark (brand chevron) is always var(--accent). Cyan, both modes.
- Buttons with solid ink bg use var(--ink) + var(--bg) for text (flips correctly).
- Small text that needs a cyan accent uses var(--accent-deep), not var(--accent).
──────────────────────────────────────────────── */