/* StudyBuddy native funnel — colour tokens, light and dark. --------------------------------------------------------------------------- The single source of colour for every native page: the marketing page (index.html, which used to carry its own :root) and the auth funnel (auth.css). The Flutter study app has the equivalent set in lib/theme/app_theme.dart — the dark values here mirror AppColors.dark* so the two surfaces read as one product across a navigation. HOW DARK IS CHOSEN. theme.js stamps data-theme="dark"|"light" on before first paint, honouring a theme pinned inside the app. The media query below is the no-JS fallback, which is why the dark values appear TWICE. *Keep the two blocks identical* — they are the same palette, reached two ways. (light-dark() would collapse them into one, but it fails outright on browsers older than ~2024 and this is the top of the funnel.) NAMING. A token says what it's FOR, not what it looks like: --card is the raised surface, white in light and near-black in dark. Anything that must stay one colour in both themes (the OAuth buttons' vendor palette) is deliberately NOT a token — see auth.css. */ :root { color-scheme: light; /* Category pastels — chip/tag fills, with a matching *-text for what sits on them. In dark these become deep tints, not bright pastels. */ --sage: #D4E4D0; --sage-mid: #B8D4B2; --sage-deep: #7FAF78; --sage-text: #3A5C35; --blush: #F0D9D4; --blush-mid: #E4C0B8; --blush-deep: #C4887C; --blush-text: #8C4A40; --sky: #D0DFF0; --sky-mid: #ADC8E8; --sky-deep: #5B8EC4; --sky-text: #3A6090; --butter: #F5EDD0; --butter-mid: #ECD9A0; --butter-deep: #C4A43C; --lav: #E2D8F0; --lav-deep: #8B74C4; /* Page + surfaces */ --bg: #FAF8F4; --bg2: #F3F0EA; --bg3: #EDE9E0; --card: #FFFFFF; /* raised surface: cards, the funnel's inputs-on-focus */ --seg-active: #FFFFFF; /* selected pill in the sign-in/sign-up toggle: must read as LIFTED off --bg3, which in dark means lighter than the track, not the darker --card. */ --bg-blur: rgba(250,248,244,0.9); /* fixed nav / mobile menu over content */ --bg-blur-strong: rgba(250,248,244,0.97); --field-bg: #F3F0EA; /* Text */ --ink: #2C2820; --ink2: #4A4540; --ink3: #7A756E; --ink4: rgba(44,40,32,0.3); /* footer copyright, the quietest text there is */ --on-ink: #FFFFFF; /* text on an --ink-filled button */ --ink-hover: #000000; /* that button's hover fill */ /* Lines */ --border: rgba(44,40,32,0.1); --border-soft: rgba(44,40,32,0.06); --border-strong: rgba(44,40,32,0.25); /* hover/focus emphasis */ /* Accent */ --indigo: #4F46E5; /* button + badge fills */ --indigo-hover: #4338CA; --indigo-text: #4F46E5; /* indigo AS TEXT — lifts in dark, fills don't */ --indigo-light: #EEEDFD; --on-indigo: #FFFFFF; /* Feedback */ --danger: #C4443C; --alert-error-bg: #F7E4E2; --alert-error-fg: #8C3A32; --alert-info-bg: #EEEDFD; --alert-info-fg: #3A32A8; /* The inverted bands (marketing CTA + stats). These are dark-on-light by design, so they can't ride --ink: in dark mode --ink is nearly white and the band would invert with it. They stay dark in both themes, lifted just off the page background in dark so the edge still reads. */ --band-bg: #2C2820; --band-border: transparent; --band-ink: #FFFFFF; --band-ink-soft: rgba(250,248,244,0.55); --band-ink-faint: rgba(250,248,244,0.15); --band-surface: rgba(255,255,255,0.06); --band-surface-border: rgba(255,255,255,0.1); --band-btn-bg: #FFFFFF; --band-btn-bg-hover: #F3F0EA; --band-btn-ink: #2C2820; --shadow-card: 0 2px 12px rgba(44,40,32,0.05); --shadow-seg: 0 1px 3px rgba(44,40,32,0.08); --wash-sage: rgba(212,228,208,0.28); /* faint sage wash behind a highlighted table column */ } /* ─── Dark: pinned in-app, or stamped by theme.js from the OS preference ─── */ :root[data-theme="dark"] { color-scheme: dark; --sage: #2D4A28; --sage-mid: #96C490; --sage-deep: #96C490; --sage-text: #96C490; --blush: #4A2E2A; --blush-mid: #7A4A42; --blush-deep: #E4A99E; --blush-text: #F0BDB4; --sky: #23384A; --sky-mid: #4A6E90; --sky-deep: #8FB6DC; --sky-text: #B7D2EC; --butter: #3A331C; --butter-mid: #6B5C2E; --butter-deep: #D9BE63; --lav: #2E2740; --lav-deep: #B9A6E8; --bg: #131210; --bg2: #1C1A17; --bg3: #26231E; --card: #232018; --seg-active: #3E3931; --bg-blur: rgba(19,18,16,0.9); --bg-blur-strong: rgba(19,18,16,0.97); --field-bg: #26231E; --ink: #F0EDE8; --ink2: #C0BBB2; --ink3: #949087; --ink4: rgba(240,237,232,0.45); --on-ink: #1B1A17; --ink-hover: #FFFFFF; --border: rgba(240,237,232,0.18); --border-soft: rgba(240,237,232,0.1); --border-strong: rgba(240,237,232,0.35); /* Dark inverts the accent button the way the Flutter app does: a light periwinkle fill with near-black text. White on a dark indigo missed AA (4.47:1) and the button barely separated from the page. */ --indigo: #818CF8; --indigo-hover: #A5B4FC; --indigo-text: #A5B4FC; --indigo-light: #23204A; --on-indigo: #1B1A17; --danger: #E88880; --alert-error-bg: #3A211E; --alert-error-fg: #F2B3AC; --alert-info-bg: #23204A; --alert-info-fg: #C7C4F5; --band-bg: #221F1A; --band-border: rgba(240,237,232,0.12); --band-ink: #F0EDE8; --band-ink-soft: rgba(240,237,232,0.6); --band-ink-faint: rgba(240,237,232,0.18); --band-surface: rgba(255,255,255,0.05); --band-surface-border: rgba(255,255,255,0.09); --band-btn-bg: #F0EDE8; --band-btn-bg-hover: #FFFFFF; --band-btn-ink: #1B1A17; --shadow-card: 0 2px 12px rgba(0,0,0,0.4); --shadow-seg: 0 1px 3px rgba(0,0,0,0.5); --wash-sage: rgba(150,196,144,0.12); } /* No-JS fallback. Identical palette to the block above; the guard keeps a theme pinned to light inside the app from being overridden by the OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --sage: #2D4A28; --sage-mid: #96C490; --sage-deep: #96C490; --sage-text: #96C490; --blush: #4A2E2A; --blush-mid: #7A4A42; --blush-deep: #E4A99E; --blush-text: #F0BDB4; --sky: #23384A; --sky-mid: #4A6E90; --sky-deep: #8FB6DC; --sky-text: #B7D2EC; --butter: #3A331C; --butter-mid: #6B5C2E; --butter-deep: #D9BE63; --lav: #2E2740; --lav-deep: #B9A6E8; --bg: #131210; --bg2: #1C1A17; --bg3: #26231E; --card: #232018; --seg-active: #3E3931; --bg-blur: rgba(19,18,16,0.9); --bg-blur-strong: rgba(19,18,16,0.97); --field-bg: #26231E; --ink: #F0EDE8; --ink2: #C0BBB2; --ink3: #949087; --ink4: rgba(240,237,232,0.45); --on-ink: #1B1A17; --ink-hover: #FFFFFF; --border: rgba(240,237,232,0.18); --border-soft: rgba(240,237,232,0.1); --border-strong: rgba(240,237,232,0.35); --indigo: #818CF8; --indigo-hover: #A5B4FC; --indigo-text: #A5B4FC; --indigo-light: #23204A; --on-indigo: #1B1A17; --danger: #E88880; --alert-error-bg: #3A211E; --alert-error-fg: #F2B3AC; --alert-info-bg: #23204A; --alert-info-fg: #C7C4F5; --band-bg: #221F1A; --band-border: rgba(240,237,232,0.12); --band-ink: #F0EDE8; --band-ink-soft: rgba(240,237,232,0.6); --band-ink-faint: rgba(240,237,232,0.18); --band-surface: rgba(255,255,255,0.05); --band-surface-border: rgba(255,255,255,0.09); --band-btn-bg: #F0EDE8; --band-btn-bg-hover: #FFFFFF; --band-btn-ink: #1B1A17; --shadow-card: 0 2px 12px rgba(0,0,0,0.4); --shadow-seg: 0 1px 3px rgba(0,0,0,0.5); --wash-sage: rgba(150,196,144,0.12); } } /* The page itself, so every native page starts from the same surface and no browser default white shows through (the study app does the same in web/index.html — issue #169). */ html { background: var(--bg); }