@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== BUILT BY STEPHEN MAIN STYLESHEET (GW26) ===== */

/* --- Source: colors-2026.css --- */
/**
 * Ghostwriter 2026 Design System - Color Tokens
 *
 * OKLCH Color Space with P3 Wide Gamut Support
 * Version: 2.0.0
 *
 * All colors use OKLCH for perceptually uniform colors with hex fallbacks
 * for older browsers. WCAG 2.2 AAA compliant contrast ratios.
 *
 * Color Format: oklch(Lightness% Chroma Hue [/ Alpha])
 * - Lightness: 0% (black) to 100% (white)
 * - Chroma: 0 (grayscale) to 0.4+ (vivid)
 * - Hue: 0-360 degrees
 */

/* ========================================================================
   1. BACKGROUND COSMOS - Quantum Depth Gradient
   ======================================================================== */

:root {
   /* Triadic cosmic harmony - Deep space backgrounds */

   /* Void - Deepest cosmic layer */
   --gw26-cosmos-void: oklch(12% 0.02 280);
   --gw26-cosmos-void-hex: #0A0A1C;
   /* Fallback */

   /* Deep - Deep space layer */
   --gw26-cosmos-deep: oklch(15% 0.03 275);
   --gw26-cosmos-deep-hex: #0F0F24;
   /* Fallback */

   /* Mid - Mid space layer */
   --gw26-cosmos-mid: oklch(18% 0.04 270);
   --gw26-cosmos-mid-hex: #15152D;
   /* Fallback */

   /* Surface - Elevated surface layer */
   --gw26-cosmos-surface: oklch(22% 0.05 265);
   --gw26-cosmos-surface-hex: #1C1C38;
   /* Fallback */

   /* Cosmic gradient using all four layers */
   --gw26-bg-cosmic: linear-gradient(165deg,
         var(--gw26-cosmos-void) 0%,
         var(--gw26-cosmos-deep) 35%,
         var(--gw26-cosmos-mid) 65%,
         var(--gw26-cosmos-surface) 100%);


   /* ========================================================================
     2. PRIMARY COLOR - ELECTRIC JADEITE (Brand Signature)
     ======================================================================== */

   /* Core - Primary brand color with electric glow */
   --gw26-jadeite-core: oklch(75% 0.18 165);
   --gw26-jadeite-core-hex: #04FFB2;
   /* Fallback */

   /* Bright - Highlight and hover states */
   --gw26-jadeite-bright: oklch(85% 0.20 165);
   --gw26-jadeite-bright-hex: #66FFCC;
   /* Fallback */

   /* Dim - Subdued variant */
   --gw26-jadeite-dim: oklch(65% 0.15 165);
   --gw26-jadeite-dim-hex: #00D48A;
   /* Fallback */

   /* Ghost - 15% opacity tint for backgrounds */
   --gw26-jadeite-ghost: oklch(75% 0.18 165 / 0.15);
   --gw26-jadeite-ghost-hex: rgba(4, 255, 178, 0.15);
   /* Fallback */


   /* ========================================================================
     3. SECONDARY COLOR - HOT PINK (CTAs & Energy)
     ======================================================================== */

   /* Core - CTA brand color with high energy */
   --gw26-hotpink-core: oklch(65% 0.25 340);
   --gw26-hotpink-core-hex: #FF0080;
   /* Fallback */

   /* Bright - Highlight and hover states */
   --gw26-hotpink-bright: oklch(75% 0.28 340);
   --gw26-hotpink-bright-hex: #FF3399;
   /* Fallback */

   /* Dim - Subdued variant */
   --gw26-hotpink-dim: oklch(55% 0.22 340);
   --gw26-hotpink-dim-hex: #CC0066;
   /* Fallback */

   /* Ghost - 12% opacity tint for backgrounds */
   --gw26-hotpink-ghost: oklch(65% 0.25 340 / 0.12);
   --gw26-hotpink-ghost-hex: rgba(255, 0, 128, 0.12);
   /* Fallback */


   /* ========================================================================
     4. TERTIARY COLOR - CYBER CYAN (Information & Links)
     ======================================================================== */

   /* Core - Information color with tech feel */
   --gw26-cyan-core: oklch(75% 0.14 195);
   --gw26-cyan-core-hex: #00FFFF;
   /* Fallback */

   /* Bright - Highlight and hover states */
   --gw26-cyan-bright: oklch(85% 0.16 195);
   --gw26-cyan-bright-hex: #66FFFF;
   /* Fallback */

   /* Dim - Subdued variant */
   --gw26-cyan-dim: oklch(65% 0.12 195);
   --gw26-cyan-dim-hex: #00CCCC;
   /* Fallback */

   /* Ghost - 10% opacity tint for backgrounds */
   --gw26-cyan-ghost: oklch(75% 0.14 195 / 0.10);
   --gw26-cyan-ghost-hex: rgba(0, 255, 255, 0.10);
   /* Fallback */


   /* ========================================================================
     5. QUATERNARY COLOR - VIOLET DREAM (Support & Ambiance)
     ======================================================================== */

   /* Core - Ambient support color */
   --gw26-violet-core: oklch(60% 0.20 285);
   --gw26-violet-core-hex: #8B5CF6;
   /* Fallback */

   /* Bright - Highlight and hover states */
   --gw26-violet-bright: oklch(70% 0.22 285);
   --gw26-violet-bright-hex: #A78BFA;
   /* Fallback */

   /* Dim - Subdued variant */
   --gw26-violet-dim: oklch(50% 0.18 285);
   --gw26-violet-dim-hex: #7C3AED;
   /* Fallback */

   /* Ghost - 8% opacity tint for backgrounds */
   --gw26-violet-ghost: oklch(60% 0.20 285 / 0.08);
   --gw26-violet-ghost-hex: rgba(139, 92, 246, 0.08);
   /* Fallback */


   /* ========================================================================
     6. TYPOGRAPHY COLORS - High Contrast on Cosmic Backgrounds
     ======================================================================== */

   /* Primary - Pure white with violet tint (AAA: 16.2:1) */
   --gw26-text-primary: #F8F8FF;
   /* Hex default (better Windows compatibility) */
   --gw26-text-primary-oklch: oklch(98% 0.01 280);

   /* Secondary - Muted white (AAA: 9.1:1) */
   --gw26-text-secondary: #D9D9EE;
   /* Hex default (better Windows compatibility) */
   --gw26-text-secondary-oklch: oklch(88% 0.02 280);

   /* Tertiary - Subdued violet (AAA: 7.5:1) */
   --gw26-text-tertiary: #A3A3CC;
   /* Hex default (better Windows compatibility) */
   --gw26-text-tertiary-oklch: oklch(72% 0.03 280);

   /* Quaternary - Ghost text (AA: 4.8:1) */
   --gw26-text-quaternary: #7272A8;
   /* Hex default (better Windows compatibility) */
   --gw26-text-quaternary-oklch: oklch(58% 0.04 280);

   /* Accent text using brand colors */
   --gw26-text-jadeite: var(--gw26-jadeite-core);
   --gw26-text-hotpink: var(--gw26-hotpink-core);
   --gw26-text-cyan: var(--gw26-cyan-core);
   --gw26-text-violet: var(--gw26-violet-core);


   /* ========================================================================
     7. SEMANTIC STATUS COLORS - WCAG AAA Compliant
     ======================================================================== */

   /* SUCCESS (Jadeite variant) */
   --gw26-success: oklch(70% 0.16 165);
   --gw26-success-hex: #00D48A;
   /* Fallback */
   --gw26-success-bg: oklch(70% 0.16 165 / 0.12);
   --gw26-success-bg-hex: rgba(0, 212, 138, 0.12);
   /* Fallback */
   --gw26-success-border: oklch(70% 0.16 165 / 0.30);
   --gw26-success-border-hex: rgba(0, 212, 138, 0.30);
   /* Fallback */

   /* ERROR (Hot Pink variant with red hue) */
   --gw26-error: oklch(60% 0.22 15);
   --gw26-error-hex: #FF3355;
   /* Fallback */
   --gw26-error-bg: oklch(60% 0.22 15 / 0.10);
   --gw26-error-bg-hex: rgba(255, 51, 85, 0.10);
   /* Fallback */
   --gw26-error-border: oklch(60% 0.22 15 / 0.25);
   --gw26-error-border-hex: rgba(255, 51, 85, 0.25);
   /* Fallback */

   /* WARNING (Amber) */
   --gw26-warning: oklch(75% 0.15 75);
   --gw26-warning-hex: #FFBB33;
   /* Fallback */
   --gw26-warning-bg: oklch(75% 0.15 75 / 0.10);
   --gw26-warning-bg-hex: rgba(255, 187, 51, 0.10);
   /* Fallback */
   --gw26-warning-border: oklch(75% 0.15 75 / 0.25);
   --gw26-warning-border-hex: rgba(255, 187, 51, 0.25);
   /* Fallback */

   /* INFO (Cyan variant) */
   --gw26-info: var(--gw26-cyan-core);
   --gw26-info-hex: var(--gw26-cyan-core-hex);
   --gw26-info-bg: var(--gw26-cyan-ghost);
   --gw26-info-bg-hex: rgba(0, 255, 255, 0.10);
   /* Fallback */
   --gw26-info-border: oklch(75% 0.14 195 / 0.30);
   --gw26-info-border-hex: rgba(0, 255, 255, 0.30);
   /* Fallback */


   /* ========================================================================
     8. GLOW EFFECTS - Shadow Colors for Neon Effects
     ======================================================================== */

   /* Jadeite glow - Multi-layer shadow */
   --gw26-glow-jadeite-inner: oklch(75% 0.18 165);
   --gw26-glow-jadeite-mid: oklch(75% 0.18 165 / 0.4);
   --gw26-glow-jadeite-outer: oklch(75% 0.18 165 / 0.2);

   /* Hot pink glow - Multi-layer shadow */
   --gw26-glow-hotpink-inner: oklch(65% 0.25 340);
   --gw26-glow-hotpink-mid: oklch(65% 0.25 340 / 0.4);
   --gw26-glow-hotpink-outer: oklch(65% 0.25 340 / 0.2);

   /* Cyan glow - Multi-layer shadow */
   --gw26-glow-cyan-inner: oklch(75% 0.14 195);
   --gw26-glow-cyan-mid: oklch(75% 0.14 195 / 0.4);
   --gw26-glow-cyan-outer: oklch(75% 0.14 195 / 0.2);

   /* Violet glow - Multi-layer shadow */
   --gw26-glow-violet-inner: oklch(60% 0.20 285);
   --gw26-glow-violet-mid: oklch(60% 0.20 285 / 0.4);
   --gw26-glow-violet-outer: oklch(60% 0.20 285 / 0.2);

   /* Composite glow shadows (ready to use) */
   --gw26-glow-jadeite:
      0 0 20px var(--gw26-glow-jadeite-inner),
      0 0 40px var(--gw26-glow-jadeite-mid),
      0 0 60px var(--gw26-glow-jadeite-outer);

   --gw26-glow-hotpink:
      0 0 20px var(--gw26-glow-hotpink-inner),
      0 0 40px var(--gw26-glow-hotpink-mid),
      0 0 60px var(--gw26-glow-hotpink-outer);

   --gw26-glow-cyan:
      0 0 20px var(--gw26-glow-cyan-inner),
      0 0 40px var(--gw26-glow-cyan-mid),
      0 0 60px var(--gw26-glow-cyan-outer);

   --gw26-glow-violet:
      0 0 20px var(--gw26-glow-violet-inner),
      0 0 40px var(--gw26-glow-violet-mid),
      0 0 60px var(--gw26-glow-violet-outer);

   /* Multi-color glow (rainbow effect) */
   --gw26-glow-multi:
      0 0 40px var(--gw26-jadeite-core),
      0 0 80px var(--gw26-hotpink-core),
      0 0 120px var(--gw26-cyan-core);


   /* ========================================================================
     9. GLASSMORPHISM LEVELS - Background, Blur, Border
     ======================================================================== */

   /* Light glass - Subtle overlay for tooltips, dropdowns */
   --gw26-glass-light-bg: oklch(18% 0.04 270 / 0.4);
   --gw26-glass-light-blur: blur(20px) saturate(1.2);
   --gw26-glass-light-border: oklch(100% 0 0 / 0.08);

   /* Medium glass - Standard panels, cards */
   --gw26-glass-medium-bg: oklch(15% 0.04 280 / 0.65);
   --gw26-glass-medium-bg-mesh:
      radial-gradient(at 49% 95%, oklch(20% 0.08 285 / 0.9) 0px, transparent 50%),
      radial-gradient(at 91% 14%, oklch(18% 0.06 280 / 0.9) 0px, transparent 50%),
      radial-gradient(at 4% 14%, oklch(28% 0.10 285 / 0.85) 0px, transparent 50%);
   /* Fully opaque for Windows compatibility */
   --gw26-glass-medium-bg-oklch: oklch(20% 0.045 268 / 0.6);
   --gw26-glass-medium-blur: blur(28px) saturate(1.3);
   --gw26-glass-medium-border: oklch(100% 0 0 / 0.12);

   /* Strong glass - Modals, focus states */
   --gw26-glass-strong-bg: oklch(22% 0.05 265 / 0.8);
   --gw26-glass-strong-blur: blur(36px) saturate(1.4);
   --gw26-glass-strong-border: oklch(100% 0 0 / 0.15);

   /* Luxury glass - Premium elements, hero sections */
   --gw26-glass-luxury-bg: oklch(24% 0.055 263 / 0.9);
   --gw26-glass-luxury-blur: blur(44px) saturate(1.5);
   --gw26-glass-luxury-border: oklch(100% 0 0 / 0.18);


   /* ========================================================================
     10. ADDITIONAL OPACITY VARIANTS - Ghost Tints
     ======================================================================== */

   /* Jadeite opacity scale */
   --gw26-jadeite-ghost-5: oklch(75% 0.18 165 / 0.05);
   --gw26-jadeite-ghost-10: oklch(75% 0.18 165 / 0.10);
   --gw26-jadeite-ghost-15: oklch(75% 0.18 165 / 0.15);
   --gw26-jadeite-ghost-20: oklch(75% 0.18 165 / 0.20);
   --gw26-jadeite-ghost-30: oklch(75% 0.18 165 / 0.30);

   /* Hot pink opacity scale */
   --gw26-hotpink-ghost-5: oklch(65% 0.25 340 / 0.05);
   --gw26-hotpink-ghost-10: oklch(65% 0.25 340 / 0.10);
   --gw26-hotpink-ghost-12: oklch(65% 0.25 340 / 0.12);
   --gw26-hotpink-ghost-20: oklch(65% 0.25 340 / 0.20);
   --gw26-hotpink-ghost-30: oklch(65% 0.25 340 / 0.30);

   /* Cyan opacity scale */
   --gw26-cyan-ghost-5: oklch(75% 0.14 195 / 0.05);
   --gw26-cyan-ghost-10: oklch(75% 0.14 195 / 0.10);
   --gw26-cyan-ghost-15: oklch(75% 0.14 195 / 0.15);
   --gw26-cyan-ghost-20: oklch(75% 0.14 195 / 0.20);
   --gw26-cyan-ghost-30: oklch(75% 0.14 195 / 0.30);

   /* Violet opacity scale */
   --gw26-violet-ghost-5: oklch(60% 0.20 285 / 0.05);
   --gw26-violet-ghost-8: oklch(60% 0.20 285 / 0.08);
   --gw26-violet-ghost-15: oklch(60% 0.20 285 / 0.15);
   --gw26-violet-ghost-20: oklch(60% 0.20 285 / 0.20);
   --gw26-violet-ghost-30: oklch(60% 0.20 285 / 0.30);

   /* White opacity scale */
   --gw26-white-ghost-5: oklch(100% 0 0 / 0.05);
   --gw26-white-ghost-8: oklch(100% 0 0 / 0.08);
   --gw26-white-ghost-10: oklch(100% 0 0 / 0.10);
   --gw26-white-ghost-12: oklch(100% 0 0 / 0.12);
   --gw26-white-ghost-15: oklch(100% 0 0 / 0.15);
   --gw26-white-ghost-18: oklch(100% 0 0 / 0.18);
   --gw26-white-ghost-20: oklch(100% 0 0 / 0.20);
   --gw26-white-ghost-30: oklch(100% 0 0 / 0.30);
}


/* ========================================================================
   11. LIGHT MODE PALETTE (Future Enhancement)
   ======================================================================== */

[data-theme="light"] {
   /* Vaporwave Luxury - Soft pastels with premium cream */

   /* Backgrounds */
   --gw26-cream-base: oklch(98% 0.01 60);
   --gw26-cream-base-hex: #FFFBF5;
   --gw26-cream-surface: oklch(96% 0.01 60);
   --gw26-cream-surface-hex: #FFF8F0;

   /* Adapted brand colors for light mode */
   --gw26-jadeite-core: oklch(55% 0.14 165);
   --gw26-jadeite-core-hex: #3BC3A6;
   --gw26-hotpink-core: oklch(65% 0.18 340);
   --gw26-hotpink-core-hex: #F2A7C2;
   --gw26-cyan-core: oklch(65% 0.12 195);
   --gw26-cyan-core-hex: #7CCFF2;

   /* Typography - Hex for Windows 11 compatibility */
   --gw26-text-primary: #151515;
   /* Hex default */
   --gw26-text-primary-oklch: oklch(18% 0.01 280);
   --gw26-text-secondary: #2A2A2A;
   /* Hex default */
   --gw26-text-secondary-oklch: oklch(28% 0.01 280);
}


/* ========================================================================
   12. BROWSER FALLBACK SUPPORT
   ======================================================================== */

/* Fallback for browsers without OKLCH support
   Note: Text colors already default to hex for Windows 11 compatibility,
   so they are not included in this fallback block. */
@supports not (color: oklch(0% 0 0)) {
   :root {
      /* Use hex fallbacks for non-text colors */
      --gw26-cosmos-void: var(--gw26-cosmos-void-hex);
      --gw26-cosmos-deep: var(--gw26-cosmos-deep-hex);
      --gw26-cosmos-mid: var(--gw26-cosmos-mid-hex);
      --gw26-cosmos-surface: var(--gw26-cosmos-surface-hex);

      --gw26-jadeite-core: var(--gw26-jadeite-core-hex);
      --gw26-jadeite-bright: var(--gw26-jadeite-bright-hex);
      --gw26-jadeite-dim: var(--gw26-jadeite-dim-hex);
      --gw26-jadeite-ghost: var(--gw26-jadeite-ghost-hex);

      --gw26-hotpink-core: var(--gw26-hotpink-core-hex);
      --gw26-hotpink-bright: var(--gw26-hotpink-bright-hex);
      --gw26-hotpink-dim: var(--gw26-hotpink-dim-hex);
      --gw26-hotpink-ghost: var(--gw26-hotpink-ghost-hex);

      --gw26-cyan-core: var(--gw26-cyan-core-hex);
      --gw26-cyan-bright: var(--gw26-cyan-bright-hex);
      --gw26-cyan-dim: var(--gw26-cyan-dim-hex);
      --gw26-cyan-ghost: var(--gw26-cyan-ghost-hex);

      --gw26-violet-core: var(--gw26-violet-core-hex);
      --gw26-violet-bright: var(--gw26-violet-bright-hex);
      --gw26-violet-dim: var(--gw26-violet-dim-hex);
      --gw26-violet-ghost: var(--gw26-violet-ghost-hex);

      --gw26-success: var(--gw26-success-hex);
      --gw26-error: var(--gw26-error-hex);
      --gw26-warning: var(--gw26-warning-hex);
      --gw26-info: var(--gw26-info-hex);

      /* Text colors are NOT included here - they default to hex for Windows 11 compatibility */
   }
}


/* ========================================================================
   13. COLOR UTILITY CLASSES (Optional - for direct usage)
   ======================================================================== */

/* Background colors */
.bg-cosmos-void {
   background-color: var(--gw26-cosmos-void);
}

.bg-cosmos-deep {
   background-color: var(--gw26-cosmos-deep);
}

.bg-cosmos-mid {
   background-color: var(--gw26-cosmos-mid);
}

.bg-cosmos-surface {
   background-color: var(--gw26-cosmos-surface);
}

.bg-cosmic-gradient {
   background: var(--gw26-bg-cosmic);
}

.bg-jadeite {
   background-color: var(--gw26-jadeite-core);
}

.bg-jadeite-bright {
   background-color: var(--gw26-jadeite-bright);
}

.bg-jadeite-dim {
   background-color: var(--gw26-jadeite-dim);
}

.bg-jadeite-ghost {
   background-color: var(--gw26-jadeite-ghost);
}

.bg-hotpink {
   background-color: var(--gw26-hotpink-core);
}

.bg-hotpink-bright {
   background-color: var(--gw26-hotpink-bright);
}

.bg-hotpink-dim {
   background-color: var(--gw26-hotpink-dim);
}

.bg-hotpink-ghost {
   background-color: var(--gw26-hotpink-ghost);
}

.bg-cyan {
   background-color: var(--gw26-cyan-core);
}

.bg-cyan-bright {
   background-color: var(--gw26-cyan-bright);
}

.bg-cyan-dim {
   background-color: var(--gw26-cyan-dim);
}

.bg-cyan-ghost {
   background-color: var(--gw26-cyan-ghost);
}

.bg-violet {
   background-color: var(--gw26-violet-core);
}

.bg-violet-bright {
   background-color: var(--gw26-violet-bright);
}

.bg-violet-dim {
   background-color: var(--gw26-violet-dim);
}

.bg-violet-ghost {
   background-color: var(--gw26-violet-ghost);
}

/* Text colors */
.text-primary {
   color: var(--gw26-text-primary);
}

.text-secondary {
   color: var(--gw26-text-secondary);
}

.text-tertiary {
   color: var(--gw26-text-tertiary);
}

.text-quaternary {
   color: var(--gw26-text-quaternary);
}

.text-jadeite {
   color: var(--gw26-jadeite-core);
}

.text-hotpink {
   color: var(--gw26-hotpink-core);
}

.text-cyan {
   color: var(--gw26-cyan-core);
}

.text-violet {
   color: var(--gw26-violet-core);
}

/* Border colors */
.border-jadeite {
   border-color: var(--gw26-jadeite-core);
}

.border-hotpink {
   border-color: var(--gw26-hotpink-core);
}

.border-cyan {
   border-color: var(--gw26-cyan-core);
}

.border-violet {
   border-color: var(--gw26-violet-core);
}

/* Glow effects */
.glow-jadeite {
   box-shadow: var(--gw26-glow-jadeite);
}

.glow-hotpink {
   box-shadow: var(--gw26-glow-hotpink);
}

.glow-cyan {
   box-shadow: var(--gw26-glow-cyan);
}

.glow-violet {
   box-shadow: var(--gw26-glow-violet);
}

.glow-multi {
   box-shadow: var(--gw26-glow-multi);
}

/* Glass effects */
.glass-light {
   background: var(--gw26-glass-light-bg);
   backdrop-filter: var(--gw26-glass-light-blur);
   border: 1px solid var(--gw26-glass-light-border);
}

.glass-medium {
   background-color: var(--gw26-glass-medium-bg);
   background-image: var(--gw26-glass-medium-bg-mesh);
   backdrop-filter: var(--gw26-glass-medium-blur);
   border: 1px solid var(--gw26-glass-medium-border);
}

.glass-strong {
   background: var(--gw26-glass-strong-bg);
   backdrop-filter: var(--gw26-glass-strong-blur);
   border: 1px solid var(--gw26-glass-strong-border);
}

.glass-luxury {
   background: var(--gw26-glass-luxury-bg);
   backdrop-filter: var(--gw26-glass-luxury-blur);
   border: 1px solid var(--gw26-glass-luxury-border);
}

/* 
  Robust Glass Panel for Windows 11 Compatibility 
  Explicitly sets background color to ensure opacity.
*/
.glass-panel {
   background-color: var(--gw26-glass-medium-bg);
   background-image: var(--gw26-glass-medium-bg-mesh);
   backdrop-filter: blur(28px) saturate(1.3);
   -webkit-backdrop-filter: blur(28px) saturate(1.3);
   border: 1px solid var(--gw26-glass-medium-border);
}


/* Glass medium mesh override — applies violet mesh gradient globally
   to any element using the glass-medium-bg token via Tailwind or inline styles */
[class*="bg-[var(--gw26-glass-medium-bg)"] {
   background-color: var(--gw26-glass-medium-bg) !important;
   background-image: var(--gw26-glass-medium-bg-mesh) !important;
}

/* ========================================================================
   END OF COLOR TOKENS
   ======================================================================== */

/* --- Source: typography-2026.css --- */
/**
 * Ghostwriter 2026 - Typography System
 *
 * Font Decision: Poppins (Display/Headings)
 * - Clean, modern geometric sans-serif
 * - Weights: 200-700 (thin to bold)
 * - Excellent readability for headings and brand voice
 *
 * Pairs with:
 * - Inter (body text)
 * - JetBrains Mono (code/monospace)
 *
 * Features:
 * - Fluid type scale using clamp()
 * - Optimized letter spacing per font
 * - Dark mode weight optimizations
 * - Performance-first loading (font-display: swap)
 */

/* ============================================================
   GOOGLE FONTS IMPORTS
   ============================================================ */

/**
 * Poppins - Display & Headings Font
 * Weights: 200-700
 * Clean geometric sans-serif with excellent legibility
 */


/**
 * Inter - Body & Interface Font
 * Variable font: 300-700 weights
 * Industry-standard UI font with excellent legibility
 */


/**
 * JetBrains Mono - Code & Monospace Font
 * Static weights: 400, 500, 600
 * Designed for developers with ligatures support
 */



/* ============================================================
   FONT FAMILIES
   ============================================================ */

@layer tokens {
  :root {
    /* Display font - Poppins (geometric sans-serif) */
    --gw26-font-display: 'Poppins', system-ui, -apple-system, sans-serif;

    /* Body font - Inter */
    --gw26-font-body: 'Poppins', system-ui, -apple-system, sans-serif;

    /* Monospace font - JetBrains Mono */
    --gw26-font-mono: 'JetBrains Mono', 'Monaco', 'Courier New', monospace;
  }
}


/* ============================================================
   FLUID TYPE SCALE
   Using clamp() for responsive scaling across all viewports
   ============================================================ */

@layer tokens {
  :root {
    /* --------------------------------------------------------
       DISPLAY TEXT (Hero Headlines)
       Uses Poppins for maximum impact
       -------------------------------------------------------- */
    --gw26-text-display-xl: clamp(3.5rem, 8vw + 1rem, 6rem);      /* 56px → 96px */
    --gw26-text-display-lg: clamp(2.75rem, 6vw + 1rem, 4.5rem);   /* 44px → 72px */
    --gw26-text-display-md: clamp(2.25rem, 5vw + 1rem, 3.5rem);   /* 36px → 56px */

    /* --------------------------------------------------------
       HEADINGS (Section Titles)
       Uses Poppins for visual hierarchy
       -------------------------------------------------------- */
    --gw26-text-h1: clamp(2rem, 4vw + 0.5rem, 3rem);              /* 32px → 48px */
    --gw26-text-h2: clamp(1.75rem, 3vw + 0.5rem, 2.25rem);        /* 28px → 36px */
    --gw26-text-h3: clamp(1.5rem, 2.5vw + 0.5rem, 1.75rem);       /* 24px → 28px */
    --gw26-text-h4: clamp(1.25rem, 2vw + 0.25rem, 1.5rem);        /* 20px → 24px */
    --gw26-text-h5: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);     /* 18px → 24px */

    /* --------------------------------------------------------
       BODY TEXT (Paragraph & Lists)
       Uses Inter for readability
       -------------------------------------------------------- */
    --gw26-text-body-lg: clamp(1.125rem, 1vw + 0.5rem, 1.25rem);  /* 18px → 20px */
    --gw26-text-body-md: 1rem;                                     /* 16px (fixed) */
    --gw26-text-body-sm: 0.875rem;                                 /* 14px */

    /* --------------------------------------------------------
       UI ELEMENTS (Labels, Buttons, Tags)
       Uses Inter for consistency
       -------------------------------------------------------- */
    --gw26-text-label-lg: 0.875rem;    /* 14px - Large labels */
    --gw26-text-label-md: 0.8125rem;   /* 13px - Standard labels */
    --gw26-text-label-sm: 0.75rem;     /* 12px - Small labels */
    --gw26-text-caption: 0.6875rem;    /* 11px - Captions, timestamps */
    --gw26-text-micro: 0.625rem;       /* 10px - Micro text (use sparingly) */
  }
}


/* ============================================================
   FONT WEIGHTS
   ============================================================ */

@layer tokens {
  :root {
    --gw26-weight-thin: 200;        /* Poppins supports 200 */
    --gw26-weight-light: 300;
    --gw26-weight-regular: 400;
    --gw26-weight-medium: 500;
    --gw26-weight-semibold: 600;
    --gw26-weight-bold: 700;
  }
}


/* ============================================================
   LETTER SPACING
   Optimized per font characteristics
   ============================================================ */

@layer tokens {
  :root {
    /* Poppins (Display) - Slightly tighter for impact */
    --gw26-tracking-tighter: -0.04em;   /* Display text (hero) */
    --gw26-tracking-tight: -0.02em;     /* Headings (h1-h3) */

    /* Inter (Body) - Standard spacing */
    --gw26-tracking-normal: 0;          /* Body text, paragraphs */

    /* UI Elements - Wider for readability */
    --gw26-tracking-wide: 0.02em;       /* Labels, small text */
    --gw26-tracking-wider: 0.05em;      /* Buttons, tags, CTAs */
    --gw26-tracking-widest: 0.1em;      /* All-caps labels (use sparingly) */

    /* JetBrains Mono - Monospace stays normal */
    --gw26-tracking-mono: 0;            /* Code blocks, technical text */
  }
}


/* ============================================================
   LINE HEIGHT
   Optimized for readability and visual hierarchy
   ============================================================ */

@layer tokens {
  :root {
    --gw26-leading-tight: 1.2;         /* Headings, display text */
    --gw26-leading-snug: 1.4;          /* UI elements, labels */
    --gw26-leading-normal: 1.6;        /* Body text, paragraphs */
    --gw26-leading-relaxed: 1.75;      /* Long-form content, articles */
    --gw26-leading-loose: 2;           /* Spacious layouts (rare) */
  }
}


/* ============================================================
   DARK MODE WEIGHT OPTIMIZATIONS
   Lighter weights appear more readable on dark backgrounds
   ============================================================ */

@layer tokens {
  @media (prefers-color-scheme: dark) {
    :root {
      /* Reduce weight slightly for better readability on dark */
      --gw26-weight-display: 600;      /* Display text (was 700) */
      --gw26-weight-heading: 600;      /* Headings (was 600) */
      --gw26-weight-body: 400;         /* Body text (unchanged) */
      --gw26-weight-ui: 500;           /* UI elements (was 500) */
    }
  }

  @media (prefers-color-scheme: light) {
    :root {
      /* Standard weights for light mode */
      --gw26-weight-display: 700;
      --gw26-weight-heading: 600;
      --gw26-weight-body: 400;
      --gw26-weight-ui: 500;
    }
  }
}


/* ============================================================
   TYPOGRAPHY UTILITY CLASSES
   Pre-built combinations for common use cases
   ============================================================ */

@layer components {
  /* --------------------------------------------------------
     DISPLAY TEXT (Hero Headlines)
     -------------------------------------------------------- */
  .gw26-display-xl {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-display-xl);
    font-weight: var(--gw26-weight-bold);
    line-height: var(--gw26-leading-tight);
    letter-spacing: var(--gw26-tracking-tighter);
    text-transform: lowercase; /* Brand voice */
  }

  .gw26-display-lg {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-display-lg);
    font-weight: var(--gw26-weight-bold);
    line-height: var(--gw26-leading-tight);
    letter-spacing: var(--gw26-tracking-tighter);
    text-transform: lowercase;
  }

  .gw26-display-md {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-display-md);
    font-weight: var(--gw26-weight-semibold);
    line-height: var(--gw26-leading-tight);
    letter-spacing: var(--gw26-tracking-tight);
    text-transform: lowercase;
  }

  /* --------------------------------------------------------
     HEADINGS (Section Titles)
     -------------------------------------------------------- */
  .gw26-h1 {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-h1);
    font-weight: var(--gw26-weight-semibold);
    line-height: var(--gw26-leading-tight);
    letter-spacing: var(--gw26-tracking-tight);
    text-transform: lowercase;
  }

  .gw26-h2 {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-h2);
    font-weight: var(--gw26-weight-semibold);
    line-height: var(--gw26-leading-tight);
    letter-spacing: var(--gw26-tracking-tight);
    text-transform: lowercase;
  }

  .gw26-h3 {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-h3);
    font-weight: var(--gw26-weight-medium);
    line-height: var(--gw26-leading-snug);
    letter-spacing: var(--gw26-tracking-tight);
    text-transform: lowercase;
  }

  .gw26-h4 {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-h4);
    font-weight: var(--gw26-weight-medium);
    line-height: var(--gw26-leading-snug);
    letter-spacing: var(--gw26-tracking-normal);
    text-transform: lowercase;
  }

  .gw26-h5 {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-h5);
    font-weight: var(--gw26-weight-medium);
    line-height: var(--gw26-leading-snug);
    letter-spacing: var(--gw26-tracking-normal);
    text-transform: lowercase;
  }

  /* --------------------------------------------------------
     BODY TEXT (Paragraphs, Lists)
     -------------------------------------------------------- */
  .gw26-body-lg {
    font-family: var(--gw26-font-body);
    font-size: var(--gw26-text-body-lg);
    font-weight: var(--gw26-weight-regular);
    line-height: var(--gw26-leading-normal);
    letter-spacing: var(--gw26-tracking-normal);
  }

  .gw26-body {
    font-family: var(--gw26-font-body);
    font-size: var(--gw26-text-body-md);
    font-weight: var(--gw26-weight-regular);
    line-height: var(--gw26-leading-normal);
    letter-spacing: var(--gw26-tracking-normal);
  }

  .gw26-body-sm {
    font-family: var(--gw26-font-body);
    font-size: var(--gw26-text-body-sm);
    font-weight: var(--gw26-weight-regular);
    line-height: var(--gw26-leading-normal);
    letter-spacing: var(--gw26-tracking-normal);
  }

  /* --------------------------------------------------------
     UI ELEMENTS (Labels, Buttons, Tags)
     -------------------------------------------------------- */
  .gw26-label-lg {
    font-family: var(--gw26-font-body);
    font-size: var(--gw26-text-label-lg);
    font-weight: var(--gw26-weight-medium);
    line-height: var(--gw26-leading-snug);
    letter-spacing: var(--gw26-tracking-wide);
  }

  .gw26-label {
    font-family: var(--gw26-font-body);
    font-size: var(--gw26-text-label-md);
    font-weight: var(--gw26-weight-medium);
    line-height: var(--gw26-leading-snug);
    letter-spacing: var(--gw26-tracking-wide);
  }

  .gw26-label-sm {
    font-family: var(--gw26-font-body);
    font-size: var(--gw26-text-label-sm);
    font-weight: var(--gw26-weight-medium);
    line-height: var(--gw26-leading-snug);
    letter-spacing: var(--gw26-tracking-wider);
  }

  .gw26-caption {
    font-family: var(--gw26-font-body);
    font-size: var(--gw26-text-caption);
    font-weight: var(--gw26-weight-regular);
    line-height: var(--gw26-leading-snug);
    letter-spacing: var(--gw26-tracking-wide);
  }

  /* --------------------------------------------------------
     MONOSPACE (Code, Technical Text)
     -------------------------------------------------------- */
  .gw26-code {
    font-family: var(--gw26-font-mono);
    font-size: var(--gw26-text-body-sm);
    font-weight: var(--gw26-weight-regular);
    line-height: var(--gw26-leading-relaxed);
    letter-spacing: var(--gw26-tracking-mono);
  }

  .gw26-code-inline {
    font-family: var(--gw26-font-mono);
    font-size: 0.9em; /* Slightly smaller than surrounding text */
    font-weight: var(--gw26-weight-medium);
    letter-spacing: var(--gw26-tracking-mono);
  }
}


/* ============================================================
   FONT FEATURE SETTINGS
   Enable OpenType features for enhanced typography
   ============================================================ */

@layer base {
  /* Poppins optimizations */
  .gw26-display-xl,
  .gw26-display-lg,
  .gw26-display-md,
  .gw26-h1,
  .gw26-h2,
  .gw26-h3,
  .gw26-h4,
  .gw26-h5 {
    font-feature-settings:
      'kern' 1,     /* Kerning */
      'liga' 1,     /* Standard ligatures */
      'calt' 1;     /* Contextual alternates */
  }

  /* Inter optimizations */
  .gw26-body-lg,
  .gw26-body,
  .gw26-body-sm,
  .gw26-label-lg,
  .gw26-label,
  .gw26-label-sm,
  .gw26-caption {
    font-feature-settings:
      'kern' 1,     /* Kerning */
      'liga' 1,     /* Standard ligatures */
      'calt' 1,     /* Contextual alternates */
      'tnum' 0,     /* Proportional numbers (better for text) */
      'zero' 0;     /* Standard zero */
  }

  /* JetBrains Mono optimizations */
  .gw26-code,
  .gw26-code-inline {
    font-feature-settings:
      'kern' 1,     /* Kerning */
      'liga' 1,     /* Programming ligatures (→, ===, etc.) */
      'calt' 1,     /* Contextual alternates */
      'zero' 1;     /* Slashed zero for code */
  }
}


/* ============================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================ */

@layer base {
  /* Preload critical fonts for faster rendering */
  /* Note: These @font-face rules are already handled by Google Fonts
     but we add font-display: swap for better performance */

  /* Optimize font rendering */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Prevent font flicker with font-display: swap */
  /* (Already included in Google Fonts import) */
}


/* ============================================================
   RESPONSIVE TYPOGRAPHY ADJUSTMENTS
   ============================================================ */

@layer base {
  /* Mobile: Tighten line-height for smaller screens */
  @media (max-width: 640px) {
    .gw26-display-xl,
    .gw26-display-lg,
    .gw26-display-md {
      line-height: 1.1; /* Even tighter on mobile */
    }
  }

  /* Large screens: Increase body text size slightly */
  @media (min-width: 1280px) {
    .gw26-body {
      font-size: 1.0625rem; /* 17px instead of 16px */
    }
  }
}


/* ============================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================ */

@layer base {
  /* Respect user's font size preferences */
  html {
    font-size: 100%; /* 16px base - allows browser zoom to work */
  }

  /* Ensure minimum contrast for small text */
  .gw26-caption,
  .gw26-label-sm {
    /* These should only be used with high-contrast colors */
    /* Minimum WCAG AAA: 7:1 contrast ratio required */
  }

  /* Prevent orphans in headings */
  .gw26-h1,
  .gw26-h2,
  .gw26-h3,
  .gw26-h4,
  .gw26-h5 {
    text-wrap: balance; /* CSS Text Level 4 - balances text lines */
  }

  /* Improve readability for body text */
  .gw26-body-lg,
  .gw26-body,
  .gw26-body-sm {
    text-wrap: pretty; /* CSS Text Level 4 - prevents orphans */
  }
}


/* ============================================================
   BRAND VOICE TYPOGRAPHY
   Lowercase aesthetic with selective capitalization
   ============================================================ */

@layer components {
  /* Default: lowercase for brand consistency */
  .gw26-brand-voice {
    text-transform: lowercase;
  }

  /* Preserve original case when needed */
  .gw26-preserve-case {
    text-transform: none;
  }

  /* All caps for special labels (use sparingly) */
  .gw26-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--gw26-tracking-widest);
    font-size: 0.85em; /* Slightly smaller when all-caps */
  }
}


/* ============================================================
   GRADIENT TEXT EFFECTS
   For display text with brand colors
   ============================================================ */

@layer components {
  .gw26-text-gradient {
    background: linear-gradient(
      135deg,
      var(--gw26-jadeite-bright),
      var(--gw26-hotpink-bright),
      var(--gw26-cyan-bright)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gw26-text-gradient-jadeite {
    background: linear-gradient(
      135deg,
      var(--gw26-jadeite-core),
      var(--gw26-jadeite-bright)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}


/* ============================================================
   USAGE EXAMPLES
   ============================================================ */

/*
  DISPLAY TEXT (Hero Headlines):
  <h1 class="gw26-display-xl gw26-text-gradient">
    ghostwriter unified
  </h1>

  HEADINGS (Section Titles):
  <h2 class="gw26-h1" style="color: var(--gw26-text-jadeite)">
    conversations
  </h2>

  BODY TEXT (Paragraphs):
  <p class="gw26-body" style="color: var(--gw26-text-secondary)">
    AI-powered responses for social media and support.
  </p>

  UI LABELS:
  <label class="gw26-label" style="color: var(--gw26-text-tertiary)">
    your message
  </label>

  CODE BLOCKS:
  <code class="gw26-code-inline">npm run dev</code>

  TIMESTAMPS/METADATA:
  <span class="gw26-caption" style="color: var(--gw26-text-quaternary)">
    2 hours ago
  </span>
*/


/* --- Source: glass-2026.css --- */
/**
 * Ghostwriter 2026 - Glassmorphism Utility System
 *
 * Four levels of premium glass effects:
 * - Light (40% opacity, 20px blur, 1.2x saturation)
 * - Medium (60% opacity, 28px blur, 1.3x saturation)
 * - Strong (80% opacity, 36px blur, 1.4x saturation)
 * - Luxury (90% opacity, 44px blur, 1.5x saturation)
 *
 * Features:
 * - Cosmic-tinted background gradients
 * - Multi-layer shadow system
 * - Subtle OKLCH white borders
 * - Inset glow overlays
 * - Performance optimizations
 * - Hover state enhancements
 *
 * @version 2.0.0
 * @see specs/017-ghostwriter-2026-design-system/DESIGN-SYSTEM-2026.md
 */

/* ==========================================================================
   Color Tokens (OKLCH)
   ========================================================================== */

:root {
  /* Cosmos background layers */
  --gw26-cosmos-void: oklch(12% 0.02 280);        /* #0A0A1C - Deep void */
  --gw26-cosmos-deep: oklch(15% 0.03 275);        /* #0F0F24 - Deep space */
  --gw26-cosmos-mid: oklch(18% 0.04 270);         /* #15152D - Mid space */
  --gw26-cosmos-surface: oklch(22% 0.05 265);     /* #1C1C38 - Surface layer */

  /* Electric neon accents */
  --gw26-jadeite-core: oklch(75% 0.18 165);       /* #04FFB2 - Core glow */
  --gw26-jadeite-bright: oklch(85% 0.20 165);     /* #66FFCC - Highlights */
  --gw26-jadeite-ghost: oklch(75% 0.18 165 / 0.15); /* Ghost tint */

  --gw26-violet-core: oklch(60% 0.20 285);        /* #8B5CF6 - Core glow */
  --gw26-violet-ghost: oklch(60% 0.20 285 / 0.08); /* Ghost tint */
}

/* ==========================================================================
   Glass Level 1: Light
   Subtle overlay - 40% opacity, 20px blur, 1.2x saturation
   ========================================================================== */

.gw26-glass-light {
  /* Layout */
  position: relative;

  /* Cosmic-tinted background gradient */
  background: linear-gradient(
    135deg,
    oklch(18% 0.04 270 / 0.4) 0%,
    oklch(20% 0.045 268 / 0.35) 50%,
    oklch(18% 0.04 270 / 0.4) 100%
  );

  /* Glassmorphism effect */
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);

  /* Subtle OKLCH white border */
  border: 1px solid oklch(100% 0 0 / 0.08);

  /* Multi-layer shadow system */
  box-shadow:
    /* Outer shadow - depth */
    0 2px 8px oklch(12% 0.02 280 / 0.2),
    /* Secondary shadow - ambient */
    0 1px 4px oklch(12% 0.02 280 / 0.15),
    /* Inset highlight - glass reflection */
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    /* Inset glow - subtle violet tint */
    inset 0 0 30px var(--gw26-violet-ghost);

  /* Performance optimization */
  will-change: transform, box-shadow;
  contain: layout style paint;

  /* Smooth transitions */
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gw26-glass-light:hover {
  /* Enhanced border on hover */
  border-color: oklch(100% 0 0 / 0.12);

  /* Elevated shadow */
  box-shadow:
    0 4px 12px oklch(12% 0.02 280 / 0.25),
    0 2px 6px oklch(12% 0.02 280 / 0.2),
    inset 0 1px 0 oklch(100% 0 0 / 0.1),
    inset 0 0 40px var(--gw26-violet-ghost);

  /* Subtle lift */
  transform: translateY(-2px);
}

/* ==========================================================================
   Glass Level 2: Medium
   Standard panels - 60% opacity, 28px blur, 1.3x saturation
   ========================================================================== */

.gw26-glass-medium {
  /* Layout */
  position: relative;

  /* Enhanced cosmic gradient */
  background: linear-gradient(
    135deg,
    oklch(20% 0.045 268 / 0.6) 0%,
    oklch(22% 0.05 265 / 0.55) 50%,
    oklch(20% 0.045 268 / 0.6) 100%
  );

  /* Glassmorphism effect */
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);

  /* Medium border */
  border: 1px solid oklch(100% 0 0 / 0.12);

  /* Multi-layer shadow system */
  box-shadow:
    /* Outer shadow - depth */
    0 4px 16px oklch(12% 0.02 280 / 0.3),
    /* Secondary shadow - ambient */
    0 2px 8px oklch(12% 0.02 280 / 0.2),
    /* Inset highlight */
    inset 0 1px 0 oklch(100% 0 0 / 0.1),
    /* Inset glow - medium violet tint */
    inset 0 0 40px var(--gw26-violet-ghost);

  /* Performance optimization */
  will-change: transform, box-shadow;
  contain: layout style paint;

  /* Smooth transitions */
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gw26-glass-medium:hover {
  /* Enhanced border */
  border-color: oklch(100% 0 0 / 0.16);

  /* Elevated shadow with glow */
  box-shadow:
    0 6px 24px oklch(12% 0.02 280 / 0.35),
    0 3px 12px oklch(12% 0.02 280 / 0.25),
    inset 0 1px 0 oklch(100% 0 0 / 0.12),
    inset 0 0 50px var(--gw26-violet-ghost),
    /* Add subtle jadeite glow on hover */
    0 0 20px var(--gw26-jadeite-ghost);

  /* Lift effect */
  transform: translateY(-3px);
}

/* ==========================================================================
   Glass Level 3: Strong
   Modals & focus states - 80% opacity, 36px blur, 1.4x saturation
   ========================================================================== */

.gw26-glass-strong {
  /* Layout */
  position: relative;

  /* Strong cosmic gradient */
  background: linear-gradient(
    135deg,
    oklch(22% 0.05 265 / 0.8) 0%,
    oklch(24% 0.055 263 / 0.75) 50%,
    oklch(22% 0.05 265 / 0.8) 100%
  );

  /* Glassmorphism effect */
  backdrop-filter: blur(36px) saturate(1.4);
  -webkit-backdrop-filter: blur(36px) saturate(1.4);

  /* Strong border */
  border: 1px solid oklch(100% 0 0 / 0.15);

  /* Multi-layer shadow system */
  box-shadow:
    /* Outer shadow - strong depth */
    0 8px 32px oklch(12% 0.02 280 / 0.4),
    /* Secondary shadow - ambient */
    0 4px 16px oklch(12% 0.02 280 / 0.3),
    /* Tertiary shadow - soft spread */
    0 2px 8px oklch(12% 0.02 280 / 0.2),
    /* Inset highlight */
    inset 0 2px 0 oklch(100% 0 0 / 0.12),
    /* Inset glow - strong violet tint */
    inset 0 0 60px var(--gw26-violet-ghost);

  /* Performance optimization */
  will-change: transform, box-shadow;
  contain: layout style paint;

  /* Smooth transitions */
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gw26-glass-strong:hover {
  /* Enhanced border with jadeite tint */
  border-color: oklch(100% 0 0 / 0.2);

  /* Dramatic elevated shadow */
  box-shadow:
    0 12px 48px oklch(12% 0.02 280 / 0.5),
    0 6px 24px oklch(12% 0.02 280 / 0.4),
    0 3px 12px oklch(12% 0.02 280 / 0.3),
    inset 0 2px 0 oklch(100% 0 0 / 0.15),
    inset 0 0 80px var(--gw26-violet-ghost),
    /* Jadeite glow */
    0 0 30px var(--gw26-jadeite-ghost);

  /* Noticeable lift */
  transform: translateY(-4px);
}

/* ==========================================================================
   Glass Level 4: Luxury
   Premium elements - 90% opacity, 44px blur, 1.5x saturation
   ========================================================================== */

.gw26-glass-luxury {
  /* Layout */
  position: relative;

  /* Luxury cosmic gradient with shimmer */
  background: linear-gradient(
    135deg,
    oklch(24% 0.055 263 / 0.9) 0%,
    oklch(26% 0.06 260 / 0.85) 25%,
    oklch(24% 0.055 263 / 0.9) 50%,
    oklch(22% 0.05 265 / 0.85) 75%,
    oklch(24% 0.055 263 / 0.9) 100%
  );
  background-size: 200% 200%;

  /* Maximum glassmorphism effect */
  backdrop-filter: blur(44px) saturate(1.5);
  -webkit-backdrop-filter: blur(44px) saturate(1.5);

  /* Luxury border with subtle jadeite tint */
  border: 1px solid oklch(100% 0 0 / 0.18);

  /* Premium multi-layer shadow system */
  box-shadow:
    /* Outer shadow - maximum depth */
    0 16px 64px oklch(12% 0.02 280 / 0.6),
    /* Secondary shadow - strong ambient */
    0 8px 32px oklch(12% 0.02 280 / 0.5),
    /* Tertiary shadow - mid spread */
    0 4px 16px oklch(12% 0.02 280 / 0.4),
    /* Quaternary shadow - soft spread */
    0 2px 8px oklch(12% 0.02 280 / 0.3),
    /* Inset highlight - glass reflection */
    inset 0 2px 0 oklch(100% 0 0 / 0.15),
    /* Inset glow - luxury violet tint */
    inset 0 0 80px var(--gw26-violet-ghost),
    /* Ambient jadeite glow */
    0 0 40px oklch(75% 0.18 165 / 0.1);

  /* Performance optimization */
  will-change: transform, box-shadow, background-position;
  contain: layout style paint;

  /* Smooth transitions */
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Animated gradient */
  animation: gw26-luxury-shimmer 8s ease-in-out infinite;
}

@keyframes gw26-luxury-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.gw26-glass-luxury:hover {
  /* Premium border with jadeite accent */
  border-color: var(--gw26-jadeite-ghost);

  /* Maximum elevated shadow with multi-color glow */
  box-shadow:
    0 24px 96px oklch(12% 0.02 280 / 0.7),
    0 12px 48px oklch(12% 0.02 280 / 0.6),
    0 6px 24px oklch(12% 0.02 280 / 0.5),
    0 3px 12px oklch(12% 0.02 280 / 0.4),
    inset 0 2px 0 oklch(100% 0 0 / 0.2),
    inset 0 0 100px var(--gw26-violet-ghost),
    /* Multi-color glow */
    0 0 60px var(--gw26-jadeite-ghost),
    0 0 80px oklch(65% 0.25 340 / 0.1); /* Hot pink ambient */

  /* Premium lift */
  transform: translateY(-6px);

  /* Faster shimmer on hover */
  animation-duration: 4s;
}

/* ==========================================================================
   Variant Modifiers
   ========================================================================== */

/* Jadeite-tinted variants */
.gw26-glass-light.gw26-glass-jadeite,
.gw26-glass-medium.gw26-glass-jadeite,
.gw26-glass-strong.gw26-glass-jadeite,
.gw26-glass-luxury.gw26-glass-jadeite {
  border-color: var(--gw26-jadeite-ghost);
}

.gw26-glass-light.gw26-glass-jadeite {
  box-shadow:
    0 2px 8px oklch(12% 0.02 280 / 0.2),
    0 1px 4px oklch(12% 0.02 280 / 0.15),
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    inset 0 0 30px var(--gw26-jadeite-ghost);
}

.gw26-glass-medium.gw26-glass-jadeite {
  box-shadow:
    0 4px 16px oklch(12% 0.02 280 / 0.3),
    0 2px 8px oklch(12% 0.02 280 / 0.2),
    inset 0 1px 0 oklch(100% 0 0 / 0.1),
    inset 0 0 40px var(--gw26-jadeite-ghost);
}

.gw26-glass-strong.gw26-glass-jadeite {
  box-shadow:
    0 8px 32px oklch(12% 0.02 280 / 0.4),
    0 4px 16px oklch(12% 0.02 280 / 0.3),
    0 2px 8px oklch(12% 0.02 280 / 0.2),
    inset 0 2px 0 oklch(100% 0 0 / 0.12),
    inset 0 0 60px var(--gw26-jadeite-ghost);
}

.gw26-glass-luxury.gw26-glass-jadeite {
  box-shadow:
    0 16px 64px oklch(12% 0.02 280 / 0.6),
    0 8px 32px oklch(12% 0.02 280 / 0.5),
    0 4px 16px oklch(12% 0.02 280 / 0.4),
    0 2px 8px oklch(12% 0.02 280 / 0.3),
    inset 0 2px 0 oklch(100% 0 0 / 0.15),
    inset 0 0 80px var(--gw26-jadeite-ghost),
    0 0 60px var(--gw26-jadeite-ghost);
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gw26-glass-light,
  .gw26-glass-medium,
  .gw26-glass-strong,
  .gw26-glass-luxury {
    transition-duration: 0.01ms !important;
    animation: none !important;
    will-change: auto;
  }

  .gw26-glass-light:hover,
  .gw26-glass-medium:hover,
  .gw26-glass-strong:hover,
  .gw26-glass-luxury:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* GPU acceleration for better performance */
.gw26-glass-light,
.gw26-glass-medium,
.gw26-glass-strong,
.gw26-glass-luxury {
  /* Force GPU layer */
  transform: translateZ(0);

  /* Optimize repaints */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;

  /* Isolate from parent stacking context */
  isolation: isolate;
}

/* Reduce blur on lower-end devices */
@media (max-width: 768px) {
  .gw26-glass-light {
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
  }

  .gw26-glass-medium {
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
  }

  .gw26-glass-strong {
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
  }

  .gw26-glass-luxury {
    backdrop-filter: blur(32px) saturate(1.4);
    -webkit-backdrop-filter: blur(32px) saturate(1.4);
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .gw26-glass-light,
  .gw26-glass-medium,
  .gw26-glass-strong,
  .gw26-glass-luxury {
    background: oklch(95% 0.01 280);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid oklch(70% 0.01 280);
    box-shadow: none;
  }
}



/* ========================================================================
   14. BUILT BY STEPHEN SPECIFIC LAYOUT & COMPONENTS
   ======================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 300; /* Light */
    background-color: var(--gw26-cosmos-void);
    background-image: 
        radial-gradient(circle at 18% 22%, var(--gw26-hotpink-ghost-30), transparent 55%),
        radial-gradient(circle at 78% 18%, var(--gw26-cyan-ghost-20), transparent 58%),
        linear-gradient(135deg, var(--gw26-cosmos-void) 0%, var(--gw26-cosmos-deep) 48%, var(--gw26-cosmos-surface) 100%);
    background-attachment: fixed;
    background-size: cover;
    color: var(--gw26-text-secondary);
    min-height: 100vh;
    padding: clamp(3rem, 8vh, 6rem) 3vw clamp(6rem, 12vh, 8rem);
    overflow-x: hidden;
    position: relative;
    transition: background 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Light Mode Override (Vaporwave style for Built By Stephen) */
[data-theme="light"] body {
    background-color: var(--gw26-cream-base);
    background-image: 
        radial-gradient(circle at 18% 82%, var(--gw26-hotpink-ghost-15), transparent 55%),
        radial-gradient(circle at 70% 20%, var(--gw26-cyan-ghost-20), transparent 60%),
        linear-gradient(135deg, var(--gw26-white-core) 0%, var(--gw26-cream-base) 50%, var(--gw26-cream-surface) 100%);
    color: var(--gw26-text-primary);
}

::selection {
    background: var(--gw26-jadeite-ghost-30);
    color: var(--gw26-text-primary);
}

/* Container */
.container {
    text-align: center;
    z-index: 2;
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3rem);
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.35rem;
    border-radius: 999px;
    color: var(--gw26-text-primary);
    font-family: var(--gw26-font-body);
    font-weight: var(--gw26-weight-medium);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    animation: slideUp 1s ease-out 0.4s both;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    transform: translateY(-2px);
}

.theme-toggle.is-pressed {
    transform: scale(0.94);
    transition-duration: 0.12s;
}

.theme-toggle .toggle-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.theme-toggle .theme-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-weight: var(--gw26-weight-medium);
}

:root .theme-toggle .toggle-icon {
    transform: rotate(180deg);
}

[data-theme="light"] .theme-toggle .toggle-icon {
    transform: rotate(0deg);
}

[data-theme="light"] .theme-toggle {
    color: var(--gw26-text-primary);
}

/* Logo */
.logo {
    margin-bottom: 2rem;
    animation: slideUp 1s ease-out;
}

.logo-svg {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.logo-svg svg {
    max-width: 280px;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(4, 255, 178, 0.4));
    transition: filter 0.6s ease, fill 0.6s ease;
}

/* Base Logo Text - Dark Mode */
.logo-svg svg path[id="built by"],
.logo-svg svg path#stephen {
    fill: url(#logo-text-gradient-synthwave);
    transition: fill 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.logo-svg svg path#Vector {
    fill: var(--gw26-jadeite-core); /* SIGNATURE JADEITE COLOR */
}

/* Light Mode Overrides */
[data-theme="light"] .logo-svg svg path[id="built by"],
[data-theme="light"] .logo-svg svg path#stephen {
    fill: url(#logo-text-gradient-vaporwave);
}
[data-theme="light"] .logo-svg svg {
    filter: none;
}
[data-theme="light"] .logo-svg svg path#Vector {
    fill: var(--gw26-jadeite-core); /* Still Jadeite but using light mode variant */
}

/* Status Element (Index) */
.status {
    border-radius: 28px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 2rem;
    animation: slideUp 1s ease-out 0.2s both;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.status p {
    color: var(--gw26-text-secondary);
    font-family: var(--gw26-font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    font-weight: var(--gw26-weight-light);
    line-height: 1.8;
    margin: 0.5rem 0;
    position: relative;
    z-index: 1;
}

:root .status p {
    background: linear-gradient(135deg, var(--gw26-hotpink-bright), var(--gw26-jadeite-core));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(4, 255, 178, 0.3));
}

[data-theme="light"] .status p {
    background: none;
    -webkit-text-fill-color: var(--gw26-text-secondary);
    filter: none;
}

/* Links Container */
.links {
    display: flex;
    gap: clamp(0.8rem, 2vw, 1.25rem);
    justify-content: center;
    flex-wrap: wrap;
    animation: slideUp 1s ease-out 0.4s both;
}

/* Link Button */
.link-button {
    border-radius: 20px;
    padding: 1rem clamp(1.5rem, 4vw, 2.2rem);
    color: oklch(88% 0.08 165); /* Pale Jadeite */
    text-decoration: none;
    font-family: var(--gw26-font-body);
    font-weight: var(--gw26-weight-medium);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.link-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Profile Image */
.profile-image-container {
    margin-bottom: 2rem;
    animation: slideUp 1s ease-out;
}

.profile-image {
    width: 240px;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

/* Generic Layout */
.content-wrapper {
    text-align: left;
    margin-top: 2rem;
    animation: slideUp 1s ease-out 0.2s both;
}

.content-section {
    margin-bottom: 3rem;
}

.content-section p {
    margin-bottom: 1.5rem;
}

.content-section a {
    color: var(--gw26-cyan-core);
    text-decoration: none;
}
.content-section a:hover {
    text-decoration: underline;
}

/* Social Grid (About Page) */
.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.social-card {
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--gw26-text-primary);
    transition: transform 0.3s ease;
}

.social-card i {
    font-size: 2rem;
    color: var(--gw26-jadeite-core);
}

.social-card:hover {
    transform: translateY(-4px);
}

/* Payment Grid (Contact Page) */
.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.payment-card {
    border-radius: 20px;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--gw26-text-primary);
    transition: transform 0.3s ease;
}

.payment-card i {
    font-size: 2rem;
    color: var(--gw26-jadeite-core);
}

.payment-card span {
    font-size: 0.9rem;
    font-weight: var(--gw26-weight-medium);
}

/* Modals */
.coming-soon-modal {
    display: none;
    place-items: center;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    background-color: rgba(6, 10, 19, 0.55);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.modal-content {
    border-radius: 24px;
    padding: clamp(1.75rem, 5vw, 2.25rem);
    width: 90%;
    max-width: 400px;
    text-align: center;
    animation: modalSlideIn 0.3s ease-out;
}

.close-modal {
    border-radius: 14px;
    padding: 0.8rem 1.5rem;
    color: var(--gw26-text-primary);
    cursor: pointer;
    font-family: var(--gw26-font-body);
}

/* Footer Badge */
.footer-badge {
    position: fixed;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.25rem;
    border-radius: 18px;
    color: var(--gw26-text-secondary);
    font-size: 0.85rem;
    font-weight: var(--gw26-weight-medium);
    text-decoration: none;
    z-index: 120;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-badge:hover {
    transform: translateX(-50%) translateY(-3px);
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive constraints */
@media (max-width: 768px) {
    body { padding: 4rem 1.5rem 6rem; }
    .container { padding: 1.5rem 1rem 3rem; }
    .logo-svg svg { max-width: 220px; }
    .links { flex-direction: column; align-items: center; }
    .link-button { width: 200px; justify-content: center; }
    .social-grid { grid-template-columns: 1fr; }
    .payment-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* Missing Grid Layouts for About & Contact */
.glass-card {
    background-color: var(--gw26-glass-medium-bg);
    background-image: var(--gw26-glass-medium-bg-mesh);
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    border: 1px solid var(--gw26-glass-medium-border);
    box-shadow: 0 4px 16px oklch(12% 0.02 280 / 0.3), 0 2px 8px oklch(12% 0.02 280 / 0.2), inset 0 1px 0 oklch(100% 0 0 / 0.1), inset 0 0 40px var(--gw26-violet-ghost);
    border-radius: 20px;
    padding: 1.5rem;
}

[data-theme="light"] .glass-card {
    background-color: var(--gw26-cream-surface);
    background-image: none;
    backdrop-filter: none;
    border: 1px solid oklch(12% 0.02 280 / 0.05);
    box-shadow: 0 4px 16px oklch(12% 0.02 280 / 0.05);
}

.about-hero, .contact-hero, .about-connect {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 28px;
    margin-bottom: 2rem;
    animation: slideUp 1s ease-out;
}

.about-hero img {
    margin-bottom: 1.5rem;
}
.about-hero h1, .contact-hero h1 {
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-h1);
    color: var(--gw26-text-jadeite);
    margin-bottom: 1rem;
}
.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}
.pill {
    background: var(--gw26-jadeite-ghost-10);
    border: 1px solid var(--gw26-jadeite-ghost-30);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--gw26-text-primary);
}
.hero-highlights, .about-grid ul {
    list-style: none;
    text-align: left;
    margin-top: 1rem;
}
.hero-highlights li, .about-grid ul li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}
.hero-highlights i, .about-grid ul i {
    color: var(--gw26-hotpink-core);
    margin-top: 0.2rem;
}

.about-grid, .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--gw26-jadeite-core);
    font-family: var(--gw26-font-display);
    font-size: var(--gw26-text-h3);
}

.contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-link {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 1rem;
    color: oklch(88% 0.08 165); /* Pale Jadeite */
    text-decoration: none;
    padding: 1rem;
    border-radius: 16px;
    background: var(--gw26-glass-light-bg);
    border: 1px solid var(--gw26-glass-light-border);
    transition: transform 0.3s ease;
}
[data-theme="light"] .contact-link {
    background: oklch(100% 0 0 / 0.5);
    border-color: rgba(0,0,0,0.05);
}

.contact-link:hover {
    transform: translateX(4px);
    border-color: var(--gw26-jadeite-ghost-30);
    color: var(--gw26-text-primary);
}
.contact-link i {
    font-size: 1.5rem;
    color: var(--gw26-cyan-core);
}

/* Force Poppins Thin/Light throughout */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
    font-weight: 200 !important; /* Thin/ExtraLight for headings */
}

body, p, span, a, div, li, strong, button {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
}

strong, b {
    font-weight: 400 !important; /* Normal weight for bold elements but not too thick */
}

/* Social Icons (replaces social-grid) */
.social-icons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    margin-top: 2rem;
}

.social-icons-container a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gw26-glass-light-bg);
    border: 1px solid var(--gw26-glass-medium-border);
    color: oklch(88% 0.08 165); /* Pale Jadeite */
    font-size: 1.8rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 12px oklch(12% 0.02 280 / 0.1);
}

[data-theme="light"] .social-icons-container a {
    background: var(--gw26-cream-surface);
    border-color: rgba(0,0,0,0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.social-icons-container a:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: var(--gw26-jadeite-ghost-30);
    color: var(--gw26-jadeite-core);
    box-shadow: 0 8px 20px var(--gw26-jadeite-ghost-20);
}

/* New Text Logo */
.logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    margin-bottom: 2rem;
    animation: slideUp 1s ease-out;
}

.logo-built, .logo-stephen {
    color: var(--gw26-jadeite-core); /* Soft Jadeite */
    white-space: nowrap;
}

[data-theme="light"] .logo-built, [data-theme="light"] .logo-stephen {
    color: var(--gw26-jadeite-core); /* Keeps it jadeite on light mode as well */
}

.neon-heart {
    width: clamp(1.8rem, 4vw, 3.5rem);
    height: auto;
    filter: drop-shadow(0 0 16px rgba(4, 255, 178, 0.4));
    transition: filter 0.6s ease;
    flex-shrink: 0;
}

[data-theme="light"] .neon-heart {
    filter: none;
}

/* --- User Override: Hot Pink Icons --- */
.contact-link i, 
.social-icons-container a i,
.section-heading i,
.pill i,
.hero-highlights i, 
.about-grid ul i,
.back-link i {
    color: var(--gw26-hotpink-core);
}

.link-button svg,
.theme-toggle .toggle-icon {
    stroke: var(--gw26-hotpink-core);
    color: var(--gw26-hotpink-core);
}

/* Maintain hover interaction by switching to Jadeite when hovered */
.social-icons-container a:hover i,
.contact-link:hover i {
    color: var(--gw26-jadeite-core);
    transition: color 0.3s ease;
}