summaryrefslogtreecommitdiffstats
path: root/assets/css/variables.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/variables.css')
-rw-r--r--assets/css/variables.css57
1 files changed, 49 insertions, 8 deletions
diff --git a/assets/css/variables.css b/assets/css/variables.css
index 74e4c86..371999a 100644
--- a/assets/css/variables.css
+++ b/assets/css/variables.css
@@ -8,16 +8,17 @@
--border: #182840;
--accent: #a855f7;
--accent2: #00ff88;
+ --accent-glow: rgba(168, 85, 247, 0.12);
--text: #c4d6e8;
--text-dim: #7a9bb8;
--muted: #304860;
- /* Type colors */
- --color-tech: #a855f7; /* purple */
- --color-life: #f59e0b; /* amber */
- --color-quote: #00ff88; /* green */
- --color-link: #38bdf8; /* cyan */
- --color-photo: #ec4899; /* pink */
+ /* Type colors (renamed from --color-*) */
+ --type-tech: #a855f7; /* purple */
+ --type-life: #f59e0b; /* amber */
+ --type-quote: #00ff88; /* green */
+ --type-link: #38bdf8; /* cyan */
+ --type-photo: #ec4899; /* pink */
/* Typography */
--font-body: 'IBM Plex Sans', system-ui, sans-serif;
@@ -40,13 +41,45 @@
--gap-lg: 2.5rem;
--gap-xl: 4rem;
- /* Spacing */
+ /* Spacing scale */
+ --sp-1: 0.25rem;
+ --sp-2: 0.5rem;
+ --sp-3: 0.75rem;
+ --sp-4: 1rem;
+ --sp-5: 1.25rem;
+ --sp-6: 1.5rem;
+ --sp-7: 1.75rem;
+ --sp-8: 2rem;
+ --sp-9: 2.25rem;
+ --sp-10: 2.5rem;
+ --sp-12: 3rem;
+ --sp-14: 3.5rem;
+ --sp-16: 4rem;
+
+ /* Z-index scale */
+ --z-base: 1;
+ --z-matrix: 0;
+ --z-nav: 100;
+ --z-menu: 99;
+ --z-modal: 200;
+ --z-progress: 9999;
+
+ /* Timing */
+ --duration-fast: 100ms;
+ --duration-base: 300ms;
+ --duration-slow: 500ms;
+
+ /* Easing */
+ --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+ /* Section spacing */
--section-py-mobile: 4rem;
--section-py-desktop: 6rem;
--card-px-mobile: 1.5rem;
--card-px-desktop: 2rem;
- /* Transitions */
+ /* Transitions (legacy, keep for compatibility) */
--transition: all 0.2s ease;
--transition-slow: all 0.75s cubic-bezier(0.16,1,0.3,1);
}
@@ -59,9 +92,17 @@ html.theme-light {
--border: #a8bdd8;
--accent: #7c3aed;
--accent2: #008f5a;
+ --accent-glow: rgba(124, 58, 237, 0.08);
--text: #0d1b2a;
--text-dim: #2e4a6a;
--muted: #6888a8;
+
+ /* Type colors (light equivalents) */
+ --type-tech: #7c3aed; /* purple */
+ --type-life: #d97706; /* amber */
+ --type-quote: #008f5a; /* green */
+ --type-link: #0284c7; /* cyan */
+ --type-photo: #be185d; /* pink */
}
/* Breakpoints as CSS variables for reference */