/* StudyBuddy design tokens — "bright & playful", tuned for K–12 without being babyish. Every screen consumes these variables; avoid ad-hoc colors/sizes elsewhere. */ :root { /* --- canvas & ink --- Cool near-neutral grey with a faint blue bias toward the accent. Grounds and text were re-tuned in the "Signal Blue" repaint for a crisper read: ink is deeper, the faint label colour clears AA with headroom. */ --canvas: #F5F7FC; --surface: #FFFFFF; --surface-sunk: #EDF0F7; --ink: #191D28; --ink-soft: #4B5362; --ink-faint: #5B6372; /* AA on canvas, surface and sunk */ --line: #E4E7EF; --line-strong: #C8CDDA; /* --- brand --- A confident blue (was a violet). `--brand` sits behind white button text, so it clears 4.5:1; `--brand-bright` is the lighter blue for decoration. */ --brand: #2C5CD6; --brand-bright: #3D6FE6; --brand-ink: #1F44A8; --brand-tint: #E7EDFD; /* --- semantic (kid-safe: success green, "try again" is warm amber, never red) --- */ --ok: #1B7A50; --ok-bright: #2FA36B; --ok-ink: #1C6B45; /* text on --ok-tint */ --ok-tint: #E4F5EC; --retry: #E8863B; --retry-ink: #9A531B; /* text on --retry-tint, and as a standalone accent */ --retry-tint: #FCEEDF; --info: #2E86C1; --info-tint: #E4F1FA; /* --- six subject colors --- solid = fills, bars, borders (graphical, 3:1 is enough) ink = anything with text on or of it (>= 4.5:1 against white AND its tint) tint = pale card wash */ --c-grape: #7A5CFF; --c-grape-ink: #6B51E0; --c-grape-tint: #EDE9FF; --c-ocean: #1F9FB5; --c-ocean-ink: #177788; --c-ocean-tint: #E1F4F6; --c-leaf: #4C9F55; --c-leaf-ink: #3B7A41; --c-leaf-tint: #E7F5E7; --c-tangerine: #F0913C; --c-tangerine-ink: #9C5E27; --c-tangerine-tint: #FDEEDD; --c-berry: #E4588A; --c-berry-ink: #B0446A; --c-berry-tint: #FCE7EF; /* Lightened toward cyan so the "sky" subject stays distinct from the blue brand. */ --c-sky: #3AA4E6; --c-sky-ink: #2076A8; --c-sky-tint: #E4F1FB; /* --- achievement tiers --- */ --ach-bronze: #B5793B; --ach-bronze-ink: #8A5A28; --ach-bronze-tint: #F6ECE0; --ach-silver: #8B93A1; --ach-silver-ink: #5F6774; --ach-silver-tint: #EEF0F3; --ach-gold: #C79A2E; --ach-gold-ink: #8F6D14; --ach-gold-tint: #F8EFD6; /* --- typography --- */ --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-xxl: 2rem; /* 32 */ --fs-xl: 1.5rem; /* 24 */ --fs-lg: 1.25rem; /* 20 */ --fs-md: 1rem; /* 16 */ --fs-sm: 0.875rem; /* 14 */ --lh-tight: 1.2; --lh-body: 1.55; /* --- spacing (4px base) --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* --- shape --- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px; /* --- depth (soft two-layer shadows) --- */ --shadow-1: 0 1px 2px rgba(43,43,58,.06), 0 4px 12px rgba(43,43,58,.06); --shadow-2: 0 2px 6px rgba(43,43,58,.08), 0 14px 32px rgba(43,43,58,.12); --ring: 0 0 0 3px var(--canvas), 0 0 0 6px var(--brand); /* --- motion --- */ --ease-spring: cubic-bezier(.2, .9, .3, 1.3); --ease-out: cubic-bezier(.2, .7, .3, 1); --dur-fast: 120ms; --dur-mid: 220ms; --dur-slow: 400ms; --maxw: 1060px; } /* Reading-support options (Settings -> Look & feel). Set on pre-paint by the bootstrap in index.html, so there's no flash. */ :root[data-font="hyperlegible"] { --font-display: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; } :root[data-textsize="s"] body { font-size: 13px; } :root[data-textsize="l"] body { font-size: 17px; } /* --------------------------------------------------------------- Warm paper — a light-family reading theme (parchment ground, warm near-black ink) for long revision sessions. An explicit choice, so prefers-color-scheme never touches it. Subject and achievement colours inherit from :root; only the grounds, ink, lines, the warmer "retry" amber and the shadows change. --------------------------------------------------------------- */ :root[data-theme="paper"] { --canvas: #F1E7D0; --surface: #FBF4E2; --surface-sunk: #E9DCBE; --ink: #3A3020; --ink-soft: #5C4F38; --ink-faint: #6E6046; /* ~4.7:1 on --canvas */ --line: #E2D4B2; --line-strong: #C8B588; --brand: #2C5CD6; --brand-bright: #3D6FE6; --brand-ink: #234BB0; --brand-tint: #E5E7F1; --ok: #1B7A50; --ok-bright: #2FA36B; --ok-ink: #1C6B45; --ok-tint: #E3EFD8; --retry: #C8721F; --retry-ink: #8A4E14; --retry-tint: #F5E6CD; --info: #2E86C1; --info-tint: #E1EDF3; --shadow-1: 0 1px 2px rgba(78,58,28,.10), 0 4px 12px rgba(78,58,28,.09); --shadow-2: 0 2px 6px rgba(78,58,28,.13), 0 14px 32px rgba(78,58,28,.16); --ring: 0 0 0 3px var(--canvas), 0 0 0 6px var(--brand); color-scheme: light; } @media (prefers-reduced-motion: reduce) { * , *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* --------------------------------------------------------------- Dark theme. Same playful shapes and colour meanings, just re-grounded: the warm cream becomes a warm-tinted charcoal, subject colours brighten enough to stay legible, and every "tint" becomes a dark wash rather than a pale one. Applied by [data-theme="dark"] on , or by the system preference when the user hasn't chosen (data-theme="system"). --------------------------------------------------------------- */ :root[data-theme="dark"] { /* "Signal Blue" repaint: near-black ground with a faint blue bias, crisper text (ink-faint clears ~6.5:1 on surface, up from ~5.7), blue accent. */ --canvas: #0A0C11; --surface: #121620; --surface-sunk: #1B2130; --ink: #F1F4FA; --ink-soft: #B8BFCE; --ink-faint: #98A1B2; --line: #232A38; --line-strong: #333C4E; /* On dark, text sits ON these colours as light-on-dark far less often, so the bright hues double as the ink. */ --brand: #3A6AE0; /* white button text clears 4.5:1 here too */ --brand-bright: #6E97FF; --brand-ink: #9FBCFF; --brand-tint: #162441; --ok: #1B7A50; --ok-bright: #4FBF8B; --ok-ink: #7FD6A6; --ok-tint: #1B3A2B; --retry: #F2A45F; --retry-ink: #F2A45F; --retry-tint: #382712; --info: #57ABDD; --info-tint: #17303F; --c-grape: #9179FF; --c-grape-ink: #7F62FF; --c-grape-tint: #28223D; --c-ocean: #45BCD0; --c-ocean-ink: #2A93A5; --c-ocean-tint: #14343A; --c-leaf: #6BC176; --c-leaf-ink: #47954F; --c-leaf-tint: #1B3520; --c-tangerine: #F5A65C; --c-tangerine-ink: #C77A2F; --c-tangerine-tint: #3B2A16; --c-berry: #F07BA6; --c-berry-ink: #C55074; --c-berry-tint: #3B1E2B; --c-sky: #63C0F0; --c-sky-ink: #3D97C7; --c-sky-tint: #123240; --ach-bronze: #C08A4E; --ach-bronze-ink: #E0B486; --ach-bronze-tint: #33261A; --ach-silver: #A7AEBC; --ach-silver-ink: #C7CDD8; --ach-silver-tint: #2A2E36; --ach-gold: #D8B458; --ach-gold-ink: #EED493; --ach-gold-tint: #352C15; --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.30); --shadow-2: 0 2px 6px rgba(0,0,0,.40), 0 14px 32px rgba(0,0,0,.45); --ring: 0 0 0 3px var(--canvas), 0 0 0 6px var(--brand-bright); color-scheme: dark; } /* On dark, subject text reads as the BRIGHT hue against its dark wash; on light it reads as the darker ink against a pale wash. */ :root[data-theme="dark"] .acard__tag { color: var(--subject, var(--brand-ink)); } :root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--subject-ink, var(--brand)); } /* Follow the OS only when the user hasn't picked a side. */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { /* Mirror of :root[data-theme="dark"] — see the notes there. */ --canvas: #0A0C11; --surface: #121620; --surface-sunk: #1B2130; --ink: #F1F4FA; --ink-soft: #B8BFCE; --ink-faint: #98A1B2; --line: #232A38; --line-strong: #333C4E; --brand: #3A6AE0; --brand-bright: #6E97FF; --brand-ink: #9FBCFF; --brand-tint: #162441; --ok: #1B7A50; --ok-bright: #4FBF8B; --ok-ink: #7FD6A6; --ok-tint: #1B3A2B; --retry: #F2A45F; --retry-ink: #F2A45F; --retry-tint: #382712; --info: #57ABDD; --info-tint: #17303F; --c-grape: #9179FF; --c-grape-ink: #7F62FF; --c-grape-tint: #28223D; --c-ocean: #45BCD0; --c-ocean-ink: #2A93A5; --c-ocean-tint: #14343A; --c-leaf: #6BC176; --c-leaf-ink: #47954F; --c-leaf-tint: #1B3520; --c-tangerine: #F5A65C; --c-tangerine-ink: #C77A2F; --c-tangerine-tint: #3B2A16; --c-berry: #F07BA6; --c-berry-ink: #C55074; --c-berry-tint: #3B1E2B; --c-sky: #63C0F0; --c-sky-ink: #3D97C7; --c-sky-tint: #123240; --ach-bronze: #C08A4E; --ach-bronze-ink: #E0B486; --ach-bronze-tint: #33261A; --ach-silver: #A7AEBC; --ach-silver-ink: #C7CDD8; --ach-silver-tint: #2A2E36; --ach-gold: #D8B458; --ach-gold-ink: #EED493; --ach-gold-tint: #352C15; --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.30); --shadow-2: 0 2px 6px rgba(0,0,0,.40), 0 14px 32px rgba(0,0,0,.45); --ring: 0 0 0 3px var(--canvas), 0 0 0 6px var(--brand-bright); color-scheme: dark; } :root[data-theme="system"] .acard__tag { color: var(--subject, var(--brand-ink)); } :root[data-theme="system"] .streakbadge { color: #21170C; } }