/* ============================================ DESIGN TOKENS — My Forte Portfolio All colors, fonts, spacing, and transitions defined once, used everywhere. ============================================ */ /* --- Fonts (self-hosted, loaded via fonts.css) --- */ @import url('fonts.css'); :root { /* ---- Typography ---- */ --font-heading: 'Cabinet Grotesk', sans-serif; --font-body: 'Satoshi', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* ---- Purple Palette ---- */ --purple-deep: #4A2D8A; --purple-vivid: #7B5EBF; --purple-glow: #A78BFA; --purple-wash: #EDE9F6; --purple-mist: #F5F2FA; /* ---- Light Theme (default) ---- */ --bg-primary: #FAFAFE; --bg-secondary: #FFFFFF; --bg-elevated: #FFFFFF; --bg-nav: rgba(255, 255, 255, 0.82); --bg-modal-overlay: rgba(15, 13, 21, 0.6); --bg-card: #FFFFFF; --bg-card-hover: #FDFCFF; --text-primary: #1A1A2E; --text-secondary: #5A5A72; --text-tertiary: #8E8EA0; --text-on-purple: #FFFFFF; --border-default: rgba(74, 45, 138, 0.1); --border-hover: rgba(123, 94, 191, 0.3); --border-card: rgba(74, 45, 138, 0.08); --shadow-sm: 0 1px 3px rgba(74, 45, 138, 0.06); --shadow-md: 0 4px 16px rgba(74, 45, 138, 0.08); --shadow-lg: 0 12px 40px rgba(74, 45, 138, 0.12); --shadow-glow: 0 0 30px rgba(167, 139, 250, 0.15); /* ---- Spacing Scale ---- */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ /* ---- Border Radius ---- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; /* ---- Transitions ---- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Layout ---- */ --max-width: 1200px; --nav-height: 64px; } /* ============================================ DARK THEME OVERRIDES Applied when ============================================ */ [data-theme="dark"] { --bg-primary: #0F0D15; --bg-secondary: #141220; --bg-elevated: #1A1625; --bg-nav: rgba(15, 13, 21, 0.85); --bg-modal-overlay: rgba(0, 0, 0, 0.7); --bg-card: #1A1625; --bg-card-hover: #211D2E; --text-primary: #E8E4F0; --text-secondary: #A09BB0; --text-tertiary: #6B6580; --border-default: rgba(167, 139, 250, 0.1); --border-hover: rgba(167, 139, 250, 0.25); --border-card: rgba(167, 139, 250, 0.08); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 30px rgba(167, 139, 250, 0.1); }