/* ============================================================ BackTheme — Design Tokens Load order: [1 tokens] > 2 base > 3 components > 4 mockups > 5 sections Single source of truth. No raw hex values anywhere else. Every token is namespaced `--backtheme-*`. The handful of un-prefixed custom properties elsewhere in the project (--w, --h, --n, --i, --p, --fill, --mx, --my, --reveal-delay, --flow) are deliberately NOT tokens: they are per-instance parameters passed in from a style attribute or from JavaScript, and they are documented in README.md under "CSS Architecture". THEMING Both themes live in one declaration each via light-dark(). `color-scheme` decides which half resolves, so switching themes is one attribute on — and it also fixes native form controls, scrollbars and caret colours for free. (no attribute) follow the operating system [data-theme="light"] force light [data-theme="dark"] force dark ============================================================ */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ---------- Brand palette (theme-independent) ---------- */ --backtheme-brand-100: #CCEDFF; --backtheme-brand-200: #99DBFF; --backtheme-brand-300: #66C8FF; --backtheme-brand-400: #33B6FF; --backtheme-brand-500: #00A3FF; /* primary — from the logo mark */ --backtheme-brand-600: #0088D6; --backtheme-brand-700: #0071BD; --backtheme-brand-800: #005B96; --backtheme-brand-900: #004672; --backtheme-accent-300: #A79CFF; --backtheme-accent-400: #8A7BFF; --backtheme-accent-500: #6E5CFF; --backtheme-accent-600: #5442E0; /* ---------- Surfaces ---------- */ --backtheme-bg: light-dark(#FFFFFF, #07080A); --backtheme-bg-subtle: light-dark(#F6F8FB, #0A0C10); --backtheme-surface-1: light-dark(#FFFFFF, #0E1117); --backtheme-surface-2: light-dark(#F7F9FC, #141922); --backtheme-surface-3: light-dark(#EFF3F9, #1B212C); --backtheme-surface-4: light-dark(#E2E8F1, #232B38); /* ---------- Lines ---------- */ --backtheme-line: light-dark(rgba(10, 15, 26, .10), rgba(255, 255, 255, .07)); --backtheme-line-strong: light-dark(rgba(10, 15, 26, .17), rgba(255, 255, 255, .13)); --backtheme-line-brand: light-dark(rgba(0, 113, 189, .30), rgba(0, 163, 255, .32)); /* ---------- Foreground ---------- */ --backtheme-fg: light-dark(#0A0F1A, #EDF1F7); --backtheme-fg-muted: light-dark(#515C6E, #97A2B4); --backtheme-fg-subtle: light-dark(#64707F, #7A8699); --backtheme-fg-inverse: light-dark(#FFFFFF, #07080A); /* Brand colour that is safe to set type in, on the page background. */ --backtheme-brand-ink: light-dark(var(--backtheme-brand-700), var(--backtheme-brand-300)); /* Ink for anything sitting on a brand fill. */ --backtheme-on-brand: light-dark(#FFFFFF, #07080A); /* ---------- Status ---------- */ --backtheme-success: light-dark(#0C7A4C, #2BD98A); --backtheme-success-bg: light-dark(rgba(12, 122, 76, .09), rgba(43, 217, 138, .09)); --backtheme-success-line: light-dark(rgba(12, 122, 76, .24), rgba(43, 217, 138, .22)); --backtheme-danger: light-dark(#C4344A, #FF5A5A); /* ---------- Glass / overlay ---------- */ --backtheme-glass: light-dark(rgba(255, 255, 255, .78), rgba(14, 17, 23, .72)); --backtheme-glass-strong: light-dark(rgba(255, 255, 255, .92), rgba(7, 8, 10, .88)); /* ---------- Brand gradient ---------- Composed from stops so each half can be tuned per theme: dark mode gets a bright gradient with dark ink, light mode a deeper one with white ink. Both clear WCAG AA. */ --backtheme-grad-1: light-dark(#0079C2, #4DC4FF); --backtheme-grad-2: light-dark(var(--backtheme-brand-700), var(--backtheme-brand-500)); --backtheme-grad-3: light-dark(var(--backtheme-accent-600), var(--backtheme-accent-400)); --backtheme-grad-brand: linear-gradient(135deg, var(--backtheme-grad-1) 0%, var(--backtheme-grad-2) 45%, var(--backtheme-grad-3) 100%); /* Heading gradient — fades the last words toward brand. */ --backtheme-grad-text: linear-gradient(120deg, light-dark(#0A0F1A, #FFFFFF) 0%, light-dark(#1E4C74, #CFE6FF) 44%, light-dark(var(--backtheme-brand-700), var(--backtheme-brand-300)) 100%); /* Card sheen — light catching a bevel. */ --backtheme-sheen-1: light-dark(rgba(255, 255, 255, .9), rgba(255, 255, 255, .055)); --backtheme-sheen-2: light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, .012)); --backtheme-grad-card: linear-gradient(168deg, var(--backtheme-sheen-1) 0%, var(--backtheme-sheen-2) 46%, transparent 100%); /* Gradient hairline that fades at both ends. */ --backtheme-grad-line: linear-gradient(90deg, transparent, var(--backtheme-line-strong) 18%, var(--backtheme-line-strong) 82%, transparent); /* ---------- Decorative layers ---------- */ --backtheme-glow-brand: light-dark(rgba(0, 140, 220, .16), rgba(0, 163, 255, .42)); --backtheme-glow-accent: light-dark(rgba(110, 92, 255, .13), rgba(110, 92, 255, .34)); /* --backtheme-glow-opacity and --backtheme-grain-opacity are declared below: light-dark() accepts only, so numeric tokens need explicit theme scopes. */ --backtheme-grid-line: light-dark(rgba(10, 15, 26, .045), rgba(255, 255, 255, .035)); /* ---------- Typography ---------- */ --backtheme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --backtheme-font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --backtheme-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid type scale — 320px → 1440px viewport */ --backtheme-step--2: clamp(0.6875rem, 0.673rem + 0.072vw, 0.75rem); --backtheme-step--1: clamp(0.8125rem, 0.798rem + 0.072vw, 0.875rem); --backtheme-step-0: clamp(1rem, 0.964rem + 0.179vw, 1.125rem); --backtheme-step-1: clamp(1.125rem, 1.071rem + 0.268vw, 1.3125rem); --backtheme-step-2: clamp(1.375rem, 1.286rem + 0.446vw, 1.6875rem); --backtheme-step-3: clamp(1.625rem, 1.464rem + 0.804vw, 2.1875rem); --backtheme-step-4: clamp(1.9375rem, 1.679rem + 1.29vw, 2.8125rem); --backtheme-step-5: clamp(2.25rem, 1.804rem + 2.23vw, 3.8125rem); --backtheme-step-6: clamp(2.625rem, 1.911rem + 3.57vw, 5.125rem); --backtheme-lh-tight: 1.04; --backtheme-lh-snug: 1.14; --backtheme-lh-heading: 1.12; --backtheme-lh-normal: 1.6; --backtheme-lh-relaxed: 1.72; --backtheme-tracking-tighter: -0.04em; --backtheme-tracking-tight: -0.024em; --backtheme-tracking-normal: -0.011em; --backtheme-tracking-wide: 0.04em; --backtheme-tracking-widest: 0.16em; /* ---------- Space (fluid, 8pt-anchored) ---------- */ --backtheme-space-3xs: clamp(0.25rem, 0.241rem + 0.045vw, 0.3125rem); --backtheme-space-2xs: clamp(0.5rem, 0.482rem + 0.089vw, 0.5625rem); --backtheme-space-xs: clamp(0.75rem, 0.723rem + 0.134vw, 0.875rem); --backtheme-space-s: clamp(1rem, 0.964rem + 0.179vw, 1.125rem); --backtheme-space-m: clamp(1.5rem, 1.446rem + 0.268vw, 1.6875rem); --backtheme-space-l: clamp(2rem, 1.929rem + 0.357vw, 2.25rem); --backtheme-space-xl: clamp(3rem, 2.893rem + 0.536vw, 3.375rem); --backtheme-space-2xl: clamp(4rem, 3.464rem + 2.68vw, 5.5rem); --backtheme-space-3xl: clamp(5rem, 3.929rem + 5.36vw, 8rem); --backtheme-section-y: clamp(4.5rem, 3.2rem + 6.5vw, 8.5rem); /* ---------- Layout ---------- */ --backtheme-container: 1200px; --backtheme-container-wide: 1340px; --backtheme-container-prose: 68ch; --backtheme-gutter: clamp(1.25rem, 0.982rem + 1.34vw, 2.5rem); /* ---------- Radii ---------- */ --backtheme-r-xs: 6px; --backtheme-r-sm: 10px; --backtheme-r-md: 14px; --backtheme-r-lg: 20px; --backtheme-r-xl: 28px; --backtheme-r-2xl: 36px; --backtheme-r-full: 999px; /* ---------- Elevation ---------- */ --backtheme-shadow-sm: 0 1px 2px light-dark(rgba(10,20,40,.06), rgba(0,0,0,.4)); --backtheme-shadow-md: 0 4px 12px -2px light-dark(rgba(10,20,40,.08), rgba(0,0,0,.5)), 0 2px 4px -2px light-dark(rgba(10,20,40,.06), rgba(0,0,0,.4)); --backtheme-shadow-lg: 0 18px 40px -12px light-dark(rgba(10,20,40,.13), rgba(0,0,0,.66)), 0 6px 14px -8px light-dark(rgba(10,20,40,.08), rgba(0,0,0,.5)); --backtheme-shadow-xl: 0 36px 80px -20px light-dark(rgba(10,20,40,.18), rgba(0,0,0,.76)), 0 12px 28px -12px light-dark(rgba(10,20,40,.10), rgba(0,0,0,.55)); --backtheme-shadow-brand: 0 18px 44px -14px light-dark(rgba(0,100,170,.35), rgba(0,163,255,.48)); --backtheme-ring-brand: 0 0 0 1px light-dark(rgba(0,113,189,.5), rgba(0,163,255,.42)), 0 0 0 5px light-dark(rgba(0,113,189,.14), rgba(0,163,255,.13)); /* ---------- Motion ---------- */ --backtheme-ease-out: cubic-bezier(.16, 1, .3, 1); --backtheme-ease-in-out: cubic-bezier(.65, 0, .35, 1); --backtheme-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --backtheme-dur-fast: 140ms; --backtheme-dur-base: 240ms; --backtheme-dur-slow: 420ms; --backtheme-dur-slower: 720ms; /* ---------- Z-index ---------- */ --backtheme-z-base: 1; --backtheme-z-raised: 10; --backtheme-z-sticky: 100; --backtheme-z-drawer: 150; --backtheme-z-header: 200; --backtheme-z-overlay: 300; --backtheme-z-modal: 400; --backtheme-z-toast: 500; /* ---------- Component-level ---------- */ --backtheme-header-h: 68px; } /* ------------------------------------------------------------ Numeric theme tokens light-dark() is defined to take two values. Passing numbers produces an invalid value, and a property that consumes it silently falls back to its INITIAL value -- opacity:1 in this case, which means full-strength grain and glows. So these are scoped by hand. ------------------------------------------------------------ */ /* Dark is the default, matching the dark half of every light-dark() above. */ :root { --backtheme-glow-opacity: .5; --backtheme-grain-opacity: .035; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --backtheme-glow-opacity: .75; --backtheme-grain-opacity: .02; } } :root[data-theme="light"] { --backtheme-glow-opacity: .75; --backtheme-grain-opacity: .02; } @media (min-width: 900px) { :root { --backtheme-header-h: 76px; } } /* Honour reduced-motion globally by zeroing the duration tokens. */ @media (prefers-reduced-motion: reduce) { :root { --backtheme-dur-fast: 1ms; --backtheme-dur-base: 1ms; --backtheme-dur-slow: 1ms; --backtheme-dur-slower: 1ms; } } /* While the theme is switching, suppress transitions so the whole page flips at once instead of every element easing at its own rate. */ :root.backtheme-theme-switching, :root.backtheme-theme-switching * { transition: none !important; }