/* themes.css — Goosie Labs Global Theme System * Maintained by @Cssy * * Injected into every page via nginx sub_filter. * Applies to both the nsite homepage (--blue-*, --gray-*) and * all React apps that use the semantic token system (--color-*). * * To add a new theme: * 1. Add a [data-theme="name"] block here * 2. Add it to THEMES in /theme-selector.js * 3. Done — no rebuilds needed */ /* ───────────────────────────────────────────────────────────────── THEME INDICATOR — 3px accent line at top of every page Visible immediately when a non-default theme is active. ───────────────────────────────────────────────────────────────── */ [data-theme]:not([data-theme=""])::before { content: ''; display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--color-brand, var(--primary, #6366f1)); z-index: 99999; pointer-events: none; } /* ───────────────────────────────────────────────────────────────── SEMANTIC TOKENS — default (light) These are used by new apps. The homepage has its own :root inline; we don't redefine those defaults here to avoid conflicts. ───────────────────────────────────────────────────────────────── */ :root { /* Semantic brand */ --color-brand: #6366f1; --color-brand-hover: #4f46e5; --color-brand-muted: #e0e7ff; --color-brand-fg: #ffffff; /* Backgrounds */ --color-bg: #ffffff; --color-bg-subtle: #f9fafb; --color-bg-muted: #f3f4f6; --color-bg-inverse: #111827; /* Surfaces */ --color-surface: #ffffff; --color-surface-raised: #f9fafb; --color-surface-overlay: rgba(0,0,0,0.05); /* Borders */ --color-border: #e5e7eb; --color-border-strong: #d1d5db; /* Text */ --color-text: #111827; --color-text-muted: #6b7280; --color-text-subtle: #9ca3af; --color-text-inverse: #ffffff; --color-text-link: #4f46e5; /* Status */ --color-success: #10b981; --color-success-bg: #d1fae5; --color-warning: #f59e0b; --color-warning-bg: #fef3c7; --color-error: #ef4444; --color-error-bg: #fee2e2; --color-info: #3b82f6; --color-info-bg: #dbeafe; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* Z-index scale */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } /* ───────────────────────────────────────────────────────────────── DARK THEME Tailwind v4 apps: theme-loader adds class="dark" to , which activates the app's own .dark CSS variable block. The rules below cover the homepage + non-Tailwind pages. ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Homepage palette */ --blue-50: #1e293b; --blue-100: #334155; --blue-200: #475569; --blue-300: #64748b; --blue-400: #94a3b8; --blue-600: #cbd5e1; --blue-800: #0f172a; --blue-900: #020617; --gray-50: #1a1a1a; --gray-100: #262626; --gray-200: #404040; --gray-400: #737373; --gray-600: #a3a3a3; --gray-800: #e5e5e5; --white: #f8fafc; /* Semantic tokens */ --color-brand: #818cf8; --color-brand-hover: #6366f1; --color-brand-muted: #312e81; --color-brand-fg: #ffffff; --color-bg: #0f172a; --color-bg-subtle: #1e293b; --color-bg-muted: #334155; --color-bg-inverse: #f8fafc; --color-surface: #1e293b; --color-surface-raised: #334155; --color-surface-overlay: rgba(255,255,255,0.05); --color-border: #334155; --color-border-strong: #475569; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; --color-text-inverse: #0f172a; --color-text-link: #818cf8; --color-success: #34d399; --color-success-bg: #064e3b; --color-warning: #fbbf24; --color-warning-bg: #78350f; --color-error: #f87171; --color-error-bg: #7f1d1d; --color-info: #60a5fa; --color-info-bg: #1e3a5f; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5); } /* Dark mode body background — homepage/non-Tailwind pages */ [data-theme="dark"] body { background-color: var(--blue-900); color: var(--gray-800); } /* Tailwind v4 apps: .dark class handles variables, but reinforce here */ [data-theme="dark"] { --background: hsl(222.2 84% 4.9%); --foreground: hsl(210 40% 98%); --card: hsl(222.2 84% 4.9%); --card-foreground: hsl(210 40% 98%); --primary: hsl(210 40% 98%); --primary-foreground: hsl(222.2 47.4% 11.2%); --muted: hsl(217.2 32.6% 17.5%); --muted-foreground: hsl(215 20.2% 65.1%); --border: hsl(217.2 32.6% 17.5%); --input: hsl(217.2 32.6% 17.5%); --ring: hsl(212.7 26.8% 83.9%); } /* ───────────────────────────────────────────────────────────────── CANADIAN THEME — maple leaf red + white Primary buttons, links, rings → Canadian red ───────────────────────────────────────────────────────────────── */ [data-theme="canadian"] { /* Homepage palette — blues become Canadian reds */ --blue-50: #fff0f1; --blue-100: #ffd6da; --blue-200: #f5a9b0; --blue-300: #e87580; --blue-400: #d80621; /* Canadian flag red */ --blue-600: #9b0017; --blue-800: #5c000d; --blue-900: #3d0007; --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #e5e5e5; --gray-400: #a3a3a3; --gray-600: #737373; --gray-800: #171717; --white: #ffffff; /* Semantic tokens */ --color-brand: #d80621; --color-brand-hover: #b0051a; --color-brand-muted: #ffe5e8; --color-brand-fg: #ffffff; --color-bg: #ffffff; --color-bg-subtle: #fff5f6; --color-bg-muted: #ffe5e8; --color-bg-inverse: #3d0007; --color-surface: #ffffff; --color-surface-raised: #fff5f6; --color-surface-overlay: rgba(216,6,33,0.06); --color-border: #fecdd3; --color-border-strong: #fda4af; --color-text: #1a0003; --color-text-muted: #6b2230; --color-text-subtle: #9f3344; --color-text-inverse: #ffffff; --color-text-link: #d80621; /* shadcn/ui + Tailwind v4 apps */ --primary: hsl(354 95% 43%); /* #d80621 */ --primary-foreground: hsl(0 0% 100%); --ring: hsl(354 95% 43%); --destructive: hsl(354 95% 43%); --background: hsl(354 100% 99%); /* faint red tint */ --card: hsl(354 100% 99%); } /* ───────────────────────────────────────────────────────────────── GOOSE THEME — amber/honey ───────────────────────────────────────────────────────────────── */ [data-theme="goose"] { /* Homepage palette — blues become warm amber */ --blue-50: #fffbeb; --blue-100: #fef3c7; --blue-200: #fde68a; --blue-300: #fbbf24; --blue-400: #f59e0b; --blue-600: #b45309; --blue-800: #451a03; --blue-900: #271009; --gray-50: #fafaf9; --gray-100: #f5f5f4; --gray-200: #e7e5e4; --gray-400: #a8a29e; --gray-600: #78716c; --gray-800: #1c1917; --white: #ffffff; /* Semantic tokens */ --color-brand: #f59e0b; --color-brand-hover: #d97706; --color-brand-muted: #fef3c7; --color-brand-fg: #1c1917; --color-bg: #fffbeb; --color-bg-subtle: #fef3c7; --color-bg-muted: #fde68a; --color-bg-inverse: #1c1917; --color-surface: #ffffff; --color-surface-raised: #fffbeb; --color-surface-overlay: rgba(245,158,11,0.08); --color-border: #fde68a; --color-border-strong: #fbbf24; --color-text: #1c1917; --color-text-muted: #57534e; --color-text-subtle: #a8a29e; --color-text-inverse: #ffffff; --color-text-link: #b45309; /* shadcn/ui + Tailwind v4 apps */ --primary: hsl(38 92% 50%); /* amber */ --primary-foreground: hsl(0 0% 10%); --ring: hsl(38 92% 50%); --background: hsl(48 100% 98%); /* warm white */ --card: hsl(48 100% 98%); } /* ───────────────────────────────────────────────────────────────── AMERICA THEME — red, white & blue ───────────────────────────────────────────────────────────────── */ [data-theme="america"] { /* Homepage palette — blues become American navy/red */ --blue-50: #f0f4ff; --blue-100: #d0deff; --blue-200: #a0bcff; --blue-300: #6090f0; --blue-400: #3c5fa0; /* American navy accent */ --blue-600: #b22234; /* American red */ --blue-800: #1a1f4e; /* Deep navy */ --blue-900: #0d1130; /* Darkest navy */ --gray-50: #f8f9fa; --gray-100: #f0f0f0; --gray-200: #e0e0e0; --gray-400: #909090; --gray-600: #606060; --gray-800: #1a1a1a; --white: #ffffff; /* Semantic tokens */ --color-brand: #b22234; /* Old Glory Red */ --color-brand-hover: #8b1a28; --color-brand-muted: #fce8ea; --color-brand-fg: #ffffff; --color-bg: #ffffff; --color-bg-subtle: #f8f9fc; --color-bg-muted: #eef1f9; --color-bg-inverse: #0d1130; --color-surface: #ffffff; --color-surface-raised: #f8f9fc; --color-surface-overlay: rgba(60,95,160,0.06); --color-border: #d0deff; --color-border-strong: #a0bcff; --color-text: #0d1130; --color-text-muted: #3c5fa0; --color-text-subtle: #6080c0; --color-text-inverse: #ffffff; --color-text-link: #b22234; /* shadcn/ui + Tailwind v4 apps */ --primary: hsl(355 69% 41%); /* #b22234 */ --primary-foreground: hsl(0 0% 100%); --ring: hsl(220 66% 41%); /* navy ring */ --background: hsl(220 100% 99%); /* faint blue tint */ --card: hsl(220 100% 99%); } /* ───────────────────────────────────────────────────────────────── BITCOIN THEME — sats orange on dark ───────────────────────────────────────────────────────────────── */ [data-theme="bitcoin"] { /* Homepage palette — blues become bitcoin orange on dark */ --blue-50: #1a1400; --blue-100: #3d2f00; --blue-200: #6b5200; --blue-300: #a37800; --blue-400: #f7931a; /* Bitcoin orange */ --blue-600: #fbbf5a; --blue-800: #0d0d0d; --blue-900: #050505; --gray-50: #1a1a1a; --gray-100: #262626; --gray-200: #404040; --gray-400: #737373; --gray-600: #a3a3a3; --gray-800: #f5f5f5; --white: #ffffff; /* Semantic tokens */ --color-brand: #f7931a; --color-brand-hover: #e07b0e; --color-brand-muted: #fff1e0; --color-brand-fg: #ffffff; --color-bg: #0d0d0d; --color-bg-subtle: #1a1a1a; --color-bg-muted: #2a2a2a; --color-bg-inverse: #f7f7f7; --color-surface: #1a1a1a; --color-surface-raised: #2a2a2a; --color-surface-overlay: rgba(247,147,26,0.08); --color-border: #333; --color-border-strong: #555; --color-text: #f5f5f5; --color-text-muted: #a3a3a3; --color-text-subtle: #737373; --color-text-inverse: #0d0d0d; --color-text-link: #f7931a; --color-success: #34d399; --color-success-bg: #064e3b; --color-warning: #fbbf24; --color-warning-bg: #78350f; --color-error: #f87171; --color-error-bg: #7f1d1d; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6); } [data-theme="bitcoin"] body { background-color: var(--blue-900); color: var(--gray-800); } /* shadcn/ui + Tailwind v4 apps (theme-loader also adds class="dark") */ [data-theme="bitcoin"] { --background: hsl(0 0% 5%); --foreground: hsl(0 0% 95%); --card: hsl(0 0% 8%); --card-foreground: hsl(0 0% 95%); --primary: hsl(33 93% 54%); /* #f7931a */ --primary-foreground: hsl(0 0% 100%); --muted: hsl(0 0% 14%); --muted-foreground: hsl(0 0% 60%); --border: hsl(0 0% 18%); --input: hsl(0 0% 18%); --ring: hsl(33 93% 54%); }