/* ========================================================================== variables.css Design tokens only. Every other stylesheet consumes these custom properties instead of hard-coded values, so the entire visual language (palette, radii, motion, layering) can be changed from one place. ========================================================================== */ :root { /* ---- Color: surfaces & text (light theme, default) ---- */ --color-bg: #f4f8fb; --color-bg-soft: #ecf4f8; --color-surface: #ffffff; --color-text: #18212f; --color-text-muted: #5b6878; --color-border: rgba(15, 23, 42, 0.08); /* ---- Color: brand ---- */ --color-primary: #0ea5a4; --color-secondary: #2563eb; --color-ink: #0f172a; /* Fixed-value tokens: always the same in light & dark, used on permanently-dark chrome (header, footer, contact panel, hero scrim). */ --color-on-dark: #ffffff; --color-on-dark-muted: #d9e5f2; /* ---- Elevation ---- */ --shadow-md: 0 0.875rem 2.375rem rgba(15, 23, 42, 0.08); --shadow-lg: 0 1.25rem 2.875rem rgba(15, 23, 42, 0.2), 0 0.125rem 0.5rem rgba(15, 23, 42, 0.06); /* ---- Translucent surfaces (glassmorphism) ---- */ --panel-bg: rgba(255, 255, 255, 0.62); --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.5); --glass-shadow: 0 1.25rem 2.8125rem rgba(15, 23, 42, 0.2), 0 0.125rem 0.5rem rgba(15, 23, 42, 0.06); /* ---- Typography ---- */ --font-base: 'Montserrat', sans-serif; --line-height-base: 1.75; /* ---- Radius scale ---- */ --radius-sm: 0.5625rem; /* 9px – small buttons, icon buttons */ --radius-md: 0.75rem; /* 12px – primary buttons */ --radius-lg: 1rem; /* 16px – dropdown panels, logo cards */ --radius-xl: 1.375rem; /* 22px – cards */ --radius-2xl: 1.5rem; /* 24px – portfolio cards, contact iframe */ --radius-3xl: 1.75rem; /* 28px – overview image, contact panel */ --radius-4xl: 1.875rem; /* 30px – glass section panel */ --radius-full: 999px; /* pills, FABs */ /* ---- Motion ---- */ --ease-emphasized: cubic-bezier(0.19, 1, 0.22, 1); --duration-fast: 0.2s; --duration-base: 0.28s; --duration-moderate: 0.35s; --duration-slow: 0.8s; /* ---- Layering ---- */ --z-header: 1000; --z-dropdown: 9999; --z-fab: 1100; /* ---- Layout ---- */ --container-max-width: 73.75rem; /* 1180px */ --container-width: 90%; --tap-target-min: 2.75rem; /* 44px – minimum touch target */ } /* ---- Dark theme overrides ---- Toggled by darkmode.js adding/removing `.dark-mode` on . Because every component reads the tokens above (not literal colors), this block is the only place dark mode needs to be defined. */ body.dark-mode { --color-bg: #09111f; --color-bg-soft: #0d1728; --color-surface: #101b2e; --color-text: #e5edf7; --color-text-muted: #a7b5c8; --color-border: rgba(255, 255, 255, 0.08); --color-primary: #2dd4bf; --color-secondary: #60a5fa; --color-ink: #020617; --shadow-md: 0 1.125rem 2.5rem rgba(0, 0, 0, 0.35); --shadow-lg: 0 1.25rem 2.875rem rgba(0, 0, 0, 0.5); --panel-bg: rgba(16, 27, 46, 0.82); --glass-bg: rgba(28, 35, 51, 0.75); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 1.25rem 2.8125rem rgba(0, 0, 0, 0.5); }