/* ═══════════════════════════════════════════════════════════════════════ master.css — the shared theme layer for teajaypierce.com ─────────────────────────────────────────────────────────────────────── Single source of truth for design tokens (color / type / spacing / radius / shadow) PLUS automatic light+dark theming. Any page can opt in with: Everything is driven by CSS custom properties, so a page that styles with var(--color-*) gets dark mode for free. Theme resolution, three states: • no choice → follows the device (prefers-color-scheme) • data-theme="dark" on → forced dark • data-theme="light" on → forced light The dark selectors use :root:not([data-theme=light]) / :root[data-theme=dark] (specificity 0,2,0) so they win over any plain :root{} a page also defines. ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap'); /* ── LIGHT (default) ─────────────────────────────────────────────────── */ :root { color-scheme: light; --color-bg: #faf8f5; --color-surface: #f2efe9; --color-text: #1c1f1d; --color-accent: #4a7fa5; /* soft industrial blue */ --color-accent-2: #2f6b4a; /* forest green */ --color-warm: #e2712f; /* sunset orange */ --color-divider: color-mix(in srgb, #1c1f1d 14%, transparent); --color-neutral-100: #faf8f5; --color-neutral-200: #efece6; --color-neutral-300: #ddd9d1; --color-neutral-400: #c2beb6; --color-neutral-500: #a09c94; --color-neutral-600: #7e7a73; --color-neutral-700: #5c5955; --color-neutral-800: #3d3b38; --color-neutral-900: #24231f; --color-accent-100: #eff6fb; --color-accent-200: #d9e9f4; --color-accent-300: #bcd6e9; --color-accent-400: #96bcd8; --color-accent-500: #6d9dc1; --color-accent-600: #4a7fa5; --color-accent-700: #2c5f7d; --color-accent-800: #26485f; --color-accent-900: #18303f; --color-accent-2-100: #eef6f0; --color-accent-2-200: #d6e9dc; --color-accent-2-300: #b3d5be; --color-accent-2-400: #86bb98; --color-accent-2-500: #559a70; --color-accent-2-600: #3d8154; --color-accent-2-700: #2f6b4a; --color-accent-2-800: #234f37; --color-accent-2-900: #163425; --color-warm-100: #fdf1e9; --color-warm-200: #fadfcc; --color-warm-300: #f6c3a3; --color-warm-400: #f0a273; --color-warm-500: #e9834a; --color-warm-600: #e2712f; --color-warm-700: #bd5a20; --color-warm-800: #8f4318; --color-warm-900: #5e2c10; --font-heading: "Barlow Condensed", system-ui, sans-serif; --font-heading-weight: 600; --font-body: "Barlow", system-ui, sans-serif; --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --shadow-sm: 0 1px 2px color-mix(in srgb, #24231f 12%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #24231f 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #24231f 18%, transparent); } /* ── DARK — the same roles, re-grounded on a cool technical charcoal ──── Ramps keep their MEANING: step 100 = a faint fill near the ground, step 900 = the strongest ink. On dark that means 100 is a dark tint and 900 is near-white, so "pale fill + strong text" component pairs still read right. Brand mid-steps (500–700) stay vivid so buttons keep white text. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #14171c; --color-surface: #1c2027; --color-text: #e7e9ec; --color-accent: #5f93bd; --color-accent-2: #4f9e73; --color-warm: #e2712f; --color-divider: color-mix(in srgb, #e7e9ec 15%, transparent); --color-neutral-100: #1b1f26; --color-neutral-200: #232833; --color-neutral-300: #2f353f; --color-neutral-400: #454b57; --color-neutral-500: #626873; --color-neutral-600: #888f9b; --color-neutral-700: #a8aeb8; --color-neutral-800: #c8ccd3; --color-neutral-900: #e7e9ec; --color-accent-100: #16212c; --color-accent-200: #1b2f3f; --color-accent-300: #24425a; --color-accent-400: #356d92; --color-accent-500: #78b0d8; --color-accent-600: #6aa3ca; --color-accent-700: #3f739b; --color-accent-800: #bcd8ee; --color-accent-900: #dceefa; --color-accent-2-100: #14201a; --color-accent-2-200: #183a29; --color-accent-2-300: #1f4d37; --color-accent-2-400: #2f6b4a; --color-accent-2-500: #6fbf93; --color-accent-2-600: #4a9d70; --color-accent-2-700: #3f8a5f; --color-accent-2-800: #bfe3cd; --color-accent-2-900: #dcf0e5; --color-warm-100: #2a1a10; --color-warm-200: #3a2415; --color-warm-300: #55351d; --color-warm-400: #8a4e26; --color-warm-500: #d0692a; --color-warm-600: #e2712f; --color-warm-700: #f0955a; --color-warm-800: #f6c3a3; --color-warm-900: #fadfcc; --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 3px 12px rgba(0,0,0,0.55); --shadow-lg: 0 14px 36px rgba(0,0,0,0.65); } } /* Manual override — a data-theme="dark" on forces dark even in a light-preferring OS. Same values as the auto block. */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #14171c; --color-surface: #1c2027; --color-text: #e7e9ec; --color-divider: color-mix(in srgb, #e7e9ec 15%, transparent); --color-accent: #5f93bd; --color-accent-2: #4f9e73; --color-warm: #e2712f; --color-neutral-100: #1b1f26; --color-neutral-200: #232833; --color-neutral-300: #2f353f; --color-neutral-400: #454b57; --color-neutral-500: #626873; --color-neutral-600: #888f9b; --color-neutral-700: #a8aeb8; --color-neutral-800: #c8ccd3; --color-neutral-900: #e7e9ec; --color-accent-100: #16212c; --color-accent-200: #1b2f3f; --color-accent-300: #24425a; --color-accent-400: #356d92; --color-accent-500: #78b0d8; --color-accent-600: #6aa3ca; --color-accent-700: #3f739b; --color-accent-800: #bcd8ee; --color-accent-900: #dceefa; --color-accent-2-100: #14201a; --color-accent-2-200: #183a29; --color-accent-2-300: #1f4d37; --color-accent-2-400: #2f6b4a; --color-accent-2-500: #6fbf93; --color-accent-2-600: #4a9d70; --color-accent-2-700: #3f8a5f; --color-accent-2-800: #bfe3cd; --color-accent-2-900: #dcf0e5; --color-warm-100: #2a1a10; --color-warm-200: #3a2415; --color-warm-300: #55351d; --color-warm-400: #8a4e26; --color-warm-500: #d0692a; --color-warm-600: #e2712f; --color-warm-700: #f0955a; --color-warm-800: #f6c3a3; --color-warm-900: #fadfcc; --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 3px 12px rgba(0,0,0,0.55); --shadow-lg: 0 14px 36px rgba(0,0,0,0.65); } /* ── minimal reset (safe for any page that opts in) ──────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } img, svg, video, table { max-width: 100%; } /* ── theme toggle button (used on Home + Panel; harmless elsewhere) ───── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; cursor: pointer; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-size: 15px; line-height: 1; border-radius: 0; transition: border-color .15s, background .15s; } .theme-toggle:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: inline; } :root[data-theme="dark"] .theme-toggle .sun, :root:not([data-theme="light"]) .theme-toggle .sun { } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .sun { display: inline; } } :root[data-theme="dark"] .theme-toggle .moon { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: inline; } :root[data-theme="light"] .theme-toggle .moon { display: inline; } :root[data-theme="light"] .theme-toggle .sun { display: none; }