/* ===================================================== RICK PORTFOLIO: DESIGN TOKENS & THEME SYSTEM ===================================================== This file is the single source of truth for colors, typography, spacing, and components across the site. To apply a theme, set `data-theme="[name]"` on the element. The default theme is `zinc`. ===================================================== */ /* ------------------- 1. DEFAULT THEME (ZINC / PORTFOLIO PRIMARY) ------------------- This is the palette actually live across index.html, sycle.html, synopsys.html, and train.html: warm cream surfaces (#F4F4EF), light brown borders (#E5E0D6), and an emerald accent/CTA color. ------------------- */ :root, [data-theme="zinc"] { /* Backgrounds */ --color-bg: #fafafa; --color-bg-elevated: #F4F4EF; --color-surface: #ffffff; --color-surface-2: #F4F4EF; /* Borders */ --color-border: #E5E0D6; --color-border-subtle: rgba(229, 224, 214, 0.8); --color-border-strong: #d8cfba; /* Text */ --color-text: #4b5563; --color-text-heading: #111827; --color-text-muted: #6b7280; --color-text-subtle: #9ca3af; --color-text-inverse: #ffffff; /* Actions */ --color-primary: #047857; --color-primary-hover: #065f46; --color-primary-text: #ffffff; --color-secondary: #F4F4EF; --color-secondary-hover: #E5E0D6; --color-secondary-text: #111827; --color-ghost: transparent; --color-ghost-hover: #F4F4EF; --color-ghost-text: #111827; /* Accents */ --color-accent: #059669; --color-accent-2: #10b981; /* Status */ --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; } /* ------------------- 2. OCEAN THEME ------------------- */ [data-theme="ocean"] { --color-bg: #f0f9ff; --color-bg-elevated: #e0f2fe; --color-surface: #ffffff; --color-surface-2: #e0f2fe; --color-warm: #f5f5f0; --color-border: #bae6fd; --color-border-subtle: rgba(186, 230, 253, 0.8); --color-border-strong: #7dd3fc; --color-text: #0c4a6e; --color-text-heading: #082f49; --color-text-muted: #075985; --color-text-subtle: #38bdf8; --color-text-inverse: #ffffff; --color-primary: #0c4a6e; --color-primary-hover: #075985; --color-primary-text: #ffffff; --color-secondary: #e0f2fe; --color-secondary-hover: #bae6fd; --color-secondary-text: #0c4a6e; --color-ghost: transparent; --color-ghost-hover: #e0f2fe; --color-ghost-text: #0c4a6e; --color-accent: #06b6d4; --color-accent-2: #3b82f6; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #f43f5e; } /* ------------------- 3. FOREST THEME ------------------- */ [data-theme="forest"] { --color-bg: #f0fdf4; --color-bg-elevated: #dcfce7; --color-surface: #ffffff; --color-surface-2: #dcfce7; --color-border: #bbf7d0; --color-border-subtle: rgba(187, 247, 208, 0.8); --color-border-strong: #86efac; --color-text: #14532d; --color-text-heading: #052e16; --color-text-muted: #15803d; --color-text-subtle: #4ade80; --color-text-inverse: #ffffff; --color-primary: #14532d; --color-primary-hover: #166534; --color-primary-text: #ffffff; --color-secondary: #dcfce7; --color-secondary-hover: #bbf7d0; --color-secondary-text: #14532d; --color-ghost: transparent; --color-ghost-hover: #dcfce7; --color-ghost-text: #14532d; --color-accent: #059669; --color-accent-2: #10b981; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; } /* ------------------- 4. WARM THEME ------------------- */ [data-theme="warm"] { --color-bg: #fff7ed; --color-bg-elevated: #ffedd5; --color-surface: #ffffff; --color-surface-2: #ffedd5; --color-border: #fed7aa; --color-border-subtle: rgba(254, 215, 170, 0.8); --color-border-strong: #fdba74; --color-text: #7c2d12; --color-text-heading: #431407; --color-text-muted: #9a3412; --color-text-subtle: #fb923c; --color-text-inverse: #ffffff; --color-primary: #7c2d12; --color-primary-hover: #9a3412; --color-primary-text: #ffffff; --color-secondary: #ffedd5; --color-secondary-hover: #fed7aa; --color-secondary-text: #7c2d12; --color-ghost: transparent; --color-ghost-hover: #ffedd5; --color-ghost-text: #7c2d12; --color-accent: #ea580c; --color-accent-2: #f97316; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; } /* ------------------- 5. SLATE THEME ------------------- */ [data-theme="slate"] { --color-bg: #f8fafc; --color-bg-elevated: #f1f5f9; --color-surface: #ffffff; --color-surface-2: #f1f5f9; --color-border: #e2e8f0; --color-border-subtle: rgba(226, 232, 240, 0.8); --color-border-strong: #cbd5e1; --color-text: #475569; --color-text-heading: #0f172a; --color-text-muted: #64748b; --color-text-subtle: #94a3b8; --color-text-inverse: #ffffff; --color-primary: #0f172a; --color-primary-hover: #1e293b; --color-primary-text: #ffffff; --color-secondary: #f1f5f9; --color-secondary-hover: #e2e8f0; --color-secondary-text: #0f172a; --color-ghost: transparent; --color-ghost-hover: #f1f5f9; --color-ghost-text: #0f172a; --color-accent: #6366f1; --color-accent-2: #8b5cf6; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; } /* ------------------- 6. PLUM THEME ------------------- */ [data-theme="plum"] { --color-bg: #faf5ff; --color-bg-elevated: #f3e8ff; --color-surface: #ffffff; --color-surface-2: #f3e8ff; --color-border: #e9d5ff; --color-border-subtle: rgba(233, 213, 255, 0.8); --color-border-strong: #d8b4fe; --color-text: #581c87; --color-text-heading: #3b0764; --color-text-muted: #7e22ce; --color-text-subtle: #c084fc; --color-text-inverse: #ffffff; --color-primary: #581c87; --color-primary-hover: #6b21a8; --color-primary-text: #ffffff; --color-secondary: #f3e8ff; --color-secondary-hover: #e9d5ff; --color-secondary-text: #581c87; --color-ghost: transparent; --color-ghost-hover: #f3e8ff; --color-ghost-text: #581c87; --color-accent: #d946ef; --color-accent-2: #ec4899; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; } /* ------------------- 7. DARK THEME ------------------- */ [data-theme="dark"] { --color-bg: #18181b; --color-bg-elevated: #27272a; --color-surface: #27272a; --color-surface-2: #3f3f46; --color-border: #52525b; --color-border-subtle: rgba(82, 82, 91, 0.8); --color-border-strong: #71717a; --color-text: #d4d4d8; --color-text-heading: #fafafa; --color-text-muted: #a1a1aa; --color-text-subtle: #71717a; --color-text-inverse: #18181b; --color-primary: #fafafa; --color-primary-hover: #f4f4f5; --color-primary-text: #18181b; --color-secondary: #3f3f46; --color-secondary-hover: #52525b; --color-secondary-text: #fafafa; --color-ghost: transparent; --color-ghost-hover: #3f3f46; --color-ghost-text: #fafafa; --color-accent: #2dd4bf; --color-accent-2: #38bdf8; --color-success: #34d399; --color-warning: #fbbf24; --color-danger: #f87171; } /* ------------------- 8. TYPOGRAPHY ------------------- */ :root { --font-family-base: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-serif: "Crimson Text", Georgia, "Times New Roman", serif; --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; --font-size-hero: 3rem; /* 48px */ --font-size-h1: 2.25rem; /* 36px */ --font-size-h2: 1.5rem; /* 24px */ --font-size-h3: 1.25rem; /* 20px */ --font-size-h4: 1.125rem; /* 18px */ --font-size-body: 1rem; /* 16px */ --font-size-small: 0.875rem; /* 14px */ --font-size-label: 0.75rem; /* 12px */ --line-height-tight: 1.1; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; } /* ------------------- 9. SPACING ------------------- */ :root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } /* ------------------- 10. UTILITY CLASSES ------------------- */ .theme-body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-family-base); font-size: var(--font-size-body); line-height: var(--line-height-relaxed); } .theme-bg { background-color: var(--color-bg); } .theme-bg-elevated { background-color: var(--color-bg-elevated); } .theme-surface { background-color: var(--color-surface); } .theme-surface-2 { background-color: var(--color-surface-2); } .theme-text { color: var(--color-text); } .theme-heading { color: var(--color-text-heading); } .theme-muted { color: var(--color-text-muted); } .theme-subtle { color: var(--color-text-subtle); } .theme-inverse { color: var(--color-text-inverse); } .theme-border { border-color: var(--color-border); } .theme-border-subtle { border-color: var(--color-border-subtle); } .theme-border-strong { border-color: var(--color-border-strong); } .theme-accent { color: var(--color-accent); } .theme-accent-2 { color: var(--color-accent-2); } .theme-bg-accent { background-color: var(--color-accent); } .theme-bg-accent-2 { background-color: var(--color-accent-2); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); font-weight: var(--font-weight-medium); font-size: var(--font-size-small); line-height: var(--line-height-normal); text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: none; } .btn-primary { background-color: var(--color-primary); color: var(--color-primary-text); } .btn-primary:hover { background-color: var(--color-primary-hover); transform: scale(1.02); } .btn-secondary { background-color: var(--color-secondary); color: var(--color-secondary-text); } .btn-secondary:hover { background-color: var(--color-secondary-hover); } .btn-ghost { background-color: var(--color-ghost); color: var(--color-ghost-text); } .btn-ghost:hover { background-color: var(--color-ghost-hover); } /* Cards */ .card { background-color: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); } .card-elevated { background-color: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); } /* Pills / Tags */ .pill { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background-color: var(--color-bg-elevated); color: var(--color-text); font-size: var(--font-size-label); font-weight: var(--font-weight-medium); } /* Labels */ .label-mono { font-family: var(--font-family-mono); font-size: var(--font-size-label); letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; color: var(--color-text-subtle); } /* Headings use the serif font stack */ h1, h2, h3, h4 { font-family: var(--font-family-serif); font-weight: 400; line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-heading); } body { font-family: var(--font-family-base); } /* Focus */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ===================================================== 11. TAILWIND → THEME MIGRATION SHIM ===================================================== Maps commonly used Tailwind classes to the design-token variables so existing HTML can change color with the active theme without a full class refactor. ===================================================== */ /* Backgrounds */ .bg-gray-50, .bg-zinc-50 { background-color: var(--color-bg) !important; } .bg-gray-100, .bg-zinc-100 { background-color: var(--color-bg-elevated) !important; } .bg-white { background-color: var(--color-surface) !important; } .bg-gray-200, .bg-zinc-200 { background-color: var(--color-surface-2) !important; } .bg-gray-900, .bg-zinc-900 { background-color: var(--color-primary) !important; } .bg-gray-800, .bg-zinc-800 { background-color: var(--color-primary-hover) !important; } .bg-black { background-color: var(--color-primary) !important; } /* Text */ .text-gray-900, .text-zinc-900 { color: var(--color-text-heading) !important; } .text-gray-800, .text-zinc-800 { color: var(--color-text-heading) !important; } .text-gray-700, .text-zinc-700 { color: var(--color-text) !important; } .text-gray-600, .text-zinc-600 { color: var(--color-text) !important; } .text-gray-500, .text-zinc-500 { color: var(--color-text-muted) !important; } .text-gray-400, .text-zinc-400 { color: var(--color-text-subtle) !important; } .text-white { color: var(--color-text-inverse) !important; } /* Borders */ .border-gray-100, .border-zinc-100 { border-color: var(--color-border) !important; } .border-gray-200, .border-zinc-200 { border-color: var(--color-border) !important; } .border-gray-900, .border-zinc-900 { border-color: var(--color-primary) !important; } /* Hovers */ .hover\:bg-gray-50:hover, .hover\:bg-zinc-50:hover { background-color: var(--color-bg-elevated) !important; } .hover\:bg-gray-100:hover, .hover\:bg-zinc-100:hover { background-color: var(--color-surface-2) !important; } .hover\:bg-gray-900:hover, .hover\:bg-zinc-900:hover { background-color: var(--color-primary-hover) !important; } /* Backdrop / glass */ .bg-white\/80 { background-color: color-mix(in srgb, var(--color-surface) 80%, transparent) !important; }