first pass - kryz inspired

src/styles/_variables.scss

@@ -0,0 +1,78 @@
+// =============================================================================
+// Color Palette — edit these to change the entire site's color scheme
+// =============================================================================
+
+// Primary palette
+$primary-blue:         #1a3a5c;
+$primary-blue-light:   #2a5a8c;
+$primary-blue-dark:    #0e2440;
+$primary-blue-muted:   #3a6a9c;
+
+// Accent palette
+$accent-orange:        #e87a2e;
+$accent-orange-light:  #f09a4e;
+$accent-orange-dark:   #c85a1e;
+$accent-orange-muted:  #f0a86a;
+
+// Neutrals
+$neutral-white:        #ffffff;
+$neutral-cream:        #faf6f0;
+$neutral-light:        #f0ebe3;
+$neutral-medium:       #8a8580;
+$neutral-dark:         #3a3632;
+$neutral-black:        #1a1816;
+
+// Semantic
+$success-green:        #4a9e4f;
+$danger-red:           #c83030;
+$info-blue:            #3a8abf;
+
+// Gradients
+$sky-gradient:         linear-gradient(135deg, $primary-blue-dark 0%, $primary-blue 40%, $primary-blue-light 100%);
+$sunset-gradient:      linear-gradient(135deg, $accent-orange-dark 0%, $accent-orange 50%, $accent-orange-light 100%);
+$mixed-gradient:       linear-gradient(135deg, $primary-blue-dark 0%, $primary-blue 50%, $accent-orange 100%);
+
+// Typography
+$font-primary:   'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+$font-heading:   'Georgia', 'Times New Roman', serif;
+$font-mono:      'Courier New', Courier, monospace;
+
+// Spacing
+$spacing-xs:     0.25rem;
+$spacing-sm:     0.5rem;
+$spacing-md:     1rem;
+$spacing-lg:     2rem;
+$spacing-xl:     3rem;
+$spacing-2xl:    4rem;
+$spacing-3xl:    6rem;
+
+// Border radius
+$radius-sm:      4px;
+$radius-md:      8px;
+$radius-lg:      16px;
+$radius-xl:      24px;
+$radius-full:    50%;
+
+// Shadows
+$shadow-sm:      0 1px 3px rgba(0,0,0,0.12);
+$shadow-md:      0 4px 12px rgba(0,0,0,0.15);
+$shadow-lg:      0 8px 30px rgba(0,0,0,0.18);
+$shadow-xl:      0 12px 40px rgba(0,0,0,0.22);
+
+// Breakpoints
+$bp-sm:  576px;
+$bp-md:  768px;
+$bp-lg:  992px;
+$bp-xl:  1200px;
+
+// Transitions
+$transition-fast:   150ms ease;
+$transition-normal: 300ms ease;
+$transition-slow:   500ms ease;
+
+// Z-index scale
+$z-dropdown:   100;
+$z-sticky:     200;
+$z-overlay:    300;
+$z-modal:      400;
+$z-toast:      500;