/* ========================================================================== Design tokens — warm "Claude-style" theme: cream/charcoal surfaces with a single gold-orange accent family (sampled from the reference portfolio card), soft diffuse shadows instead of glassmorphism-heavy panels. ========================================================================== */ :root { /* Surfaces */ --bg-primary: #1f1e1b; --bg-secondary: #262420; --bg-elevated: #2b2925; --surface-glass: rgba(255, 255, 255, 0.04); --surface-glass-strong: rgba(255, 255, 255, 0.07); --border-glass: rgba(255, 255, 255, 0.08); --border-glass-strong: rgba(255, 255, 255, 0.14); /* Sidebar-specific surfaces (slightly recessed vs. main canvas) */ --sidebar-bg: #19180f; --sidebar-bg-hover: rgba(255, 255, 255, 0.06); --sidebar-bg-active: rgba(231, 162, 76, 0.16); --sidebar-border: rgba(255, 255, 255, 0.08); /* Text */ --text-primary: #f2efe9; --text-secondary: #b8b2a4; --text-muted: #7d7768; /* Accents — single gold/orange family (image-2 reference) */ --accent-1: #e7a24c; --accent-2: #d9822b; --accent-3: #3fbe7f; --accent-warn: #f5b74a; --accent-1-rgb: 231, 162, 76; --accent-2-rgb: 217, 130, 43; /* Contribution heatmap tiers (GitHub-inspired) */ --heat-0: #2a281f; --heat-1: #5c451c; --heat-2: #8a5f1f; --heat-3: #c68426; --heat-4: #e7a24c; /* Placeholder callouts */ --placeholder-bg: rgba(245, 183, 74, 0.12); --placeholder-border: rgba(245, 183, 74, 0.55); --placeholder-text: #f5b74a; /* Radii & shadow */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-glow-1: 0 0 40px rgba(var(--accent-1-rgb), 0.25); --shadow-glow-2: 0 0 40px rgba(var(--accent-2-rgb), 0.2); /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; /* Layout */ --max-width: 1180px; --header-height: 76px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 180ms var(--ease-out); --transition-base: 320ms var(--ease-out); --transition-slow: 600ms var(--ease-out); } /* ========================================================================== Light theme — toggled via [data-theme="light"] on (see js/theme.js) Cream canvas + warm charcoal text, matching a Claude-style chat surface, gold-orange accent sampled from the reference design (image 2). ========================================================================== */ :root[data-theme="light"] { --bg-primary: #faf8f4; --bg-secondary: #f3efe6; --bg-elevated: #ffffff; --surface-glass: rgba(255, 255, 255, 0.72); --surface-glass-strong: rgba(255, 255, 255, 0.92); --border-glass: rgba(61, 57, 41, 0.08); --border-glass-strong: rgba(61, 57, 41, 0.14); --sidebar-bg: #f0ece1; --sidebar-bg-hover: rgba(61, 57, 41, 0.05); --sidebar-bg-active: rgba(225, 150, 58, 0.16); --sidebar-border: rgba(61, 57, 41, 0.08); --text-primary: #262421; --text-secondary: #5b564b; --text-muted: #8c8577; --accent-1: #e1963a; --accent-2: #c9762a; --accent-3: #2e9e63; --accent-1-rgb: 225, 150, 58; --accent-2-rgb: 201, 118, 42; --heat-0: #ece7da; --heat-1: #e9cd9c; --heat-2: #e1ab5a; --heat-3: #cf8a2c; --heat-4: #a8661a; --placeholder-bg: rgba(217, 130, 15, 0.1); --placeholder-border: rgba(217, 130, 15, 0.5); --placeholder-text: #a86206; --shadow-glass: 0 8px 28px rgba(38, 36, 33, 0.08); --shadow-glow-1: 0 0 40px rgba(var(--accent-1-rgb), 0.16); --shadow-glow-2: 0 0 40px rgba(var(--accent-2-rgb), 0.14); } /* Smooth cross-theme transition on the properties that actually change */ body, .glass, .badge, .btn, .cell { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); }