/* =============================================================================
   GLIMMER — DESIGN TOKENS
   =============================================================================
   Optimistic futurism. A magical piece of paper that transforms.
   Foundation: M3 structural intelligence + ambient operating environment.
   ============================================================================= */

/* Font pairings — all 16 from Google Fonts, switchable at runtime */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=Atkinson+Hyperlegible:wght@400;700&family=Be+Vietnam+Pro:wght@400;500;600;700&family=Bricolage+Grotesque:wght@400;500;600;700;800&family=Chakra+Petch:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Exo+2:wght@400;500;600;700;800&family=Figtree:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Karla:wght@400;500;600;700&family=Libre+Franklin:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&family=Outfit:wght@300;400;500;600;700;800&family=Overpass:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Quicksand:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&family=Sora:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Titillium+Web:wght@400;600;700&family=Urbanist:wght@400;500;600;700;800&family=Work+Sans:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   FONT PAIRING OVERRIDES
   Work on both :root and scoped .glm containers
   --------------------------------------------------------------------------- */

/* 2. Science — Space Grotesk + Inter */
[data-fonts="science"],
[data-fonts="science"] .glm,
.glm[data-fonts="science"] {
  --glm-font-display: 'Space Grotesk', system-ui, sans-serif;
  --glm-font-body: 'Inter', system-ui, sans-serif;
}

/* 3. Refined — Sora + Nunito Sans */
[data-fonts="refined"],
[data-fonts="refined"] .glm,
.glm[data-fonts="refined"] {
  --glm-font-display: 'Sora', system-ui, sans-serif;
  --glm-font-body: 'Nunito Sans', system-ui, sans-serif;
}

/* 4. Unified — Plus Jakarta Sans */
[data-fonts="unified"],
[data-fonts="unified"] .glm,
.glm[data-fonts="unified"] {
  --glm-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --glm-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* 5. Geometric — Urbanist + Work Sans */
[data-fonts="geometric"],
[data-fonts="geometric"] .glm,
.glm[data-fonts="geometric"] {
  --glm-font-display: 'Urbanist', system-ui, sans-serif;
  --glm-font-body: 'Work Sans', system-ui, sans-serif;
}

/* 6. Technical — Chakra Petch + IBM Plex Sans */
[data-fonts="technical"],
[data-fonts="technical"] .glm,
.glm[data-fonts="technical"] {
  --glm-font-display: 'Chakra Petch', system-ui, sans-serif;
  --glm-font-body: 'IBM Plex Sans', system-ui, sans-serif;
}

/* 7. Warm Modern — Albert Sans + Source Sans 3 */
[data-fonts="warm-modern"],
[data-fonts="warm-modern"] .glm,
.glm[data-fonts="warm-modern"] {
  --glm-font-display: 'Albert Sans', system-ui, sans-serif;
  --glm-font-body: 'Source Sans 3', system-ui, sans-serif;
}

/* 8. Expressive — Bricolage Grotesque + Libre Franklin */
[data-fonts="expressive"],
[data-fonts="expressive"] .glm,
.glm[data-fonts="expressive"] {
  --glm-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --glm-font-body: 'Libre Franklin', system-ui, sans-serif;
}

/* 9. Nordic — Manrope + Karla */
[data-fonts="nordic"],
[data-fonts="nordic"] .glm,
.glm[data-fonts="nordic"] {
  --glm-font-display: 'Manrope', system-ui, sans-serif;
  --glm-font-body: 'Karla', system-ui, sans-serif;
}

/* 10. Editorial — Instrument Sans + Lora */
[data-fonts="editorial"],
[data-fonts="editorial"] .glm,
.glm[data-fonts="editorial"] {
  --glm-font-display: 'Instrument Sans', system-ui, sans-serif;
  --glm-font-body: 'Lora', serif;
}

/* 11. Playful — Fredoka + Quicksand */
[data-fonts="playful"],
[data-fonts="playful"] .glm,
.glm[data-fonts="playful"] {
  --glm-font-display: 'Fredoka', system-ui, sans-serif;
  --glm-font-body: 'Quicksand', system-ui, sans-serif;
}

/* 12. Monospace — JetBrains Mono */
[data-fonts="monospace"],
[data-fonts="monospace"] .glm,
.glm[data-fonts="monospace"] {
  --glm-font-display: 'JetBrains Mono', monospace;
  --glm-font-body: 'JetBrains Mono', monospace;
}

/* 13. Swiss — Figtree + Rubik */
[data-fonts="swiss"],
[data-fonts="swiss"] .glm,
.glm[data-fonts="swiss"] {
  --glm-font-display: 'Figtree', system-ui, sans-serif;
  --glm-font-body: 'Rubik', system-ui, sans-serif;
}

/* 14. Aerospace — Exo 2 + Titillium Web */
[data-fonts="aerospace"],
[data-fonts="aerospace"] .glm,
.glm[data-fonts="aerospace"] {
  --glm-font-display: 'Exo 2', system-ui, sans-serif;
  --glm-font-body: 'Titillium Web', system-ui, sans-serif;
}

/* 15. Humanist — Atkinson Hyperlegible */
[data-fonts="humanist"],
[data-fonts="humanist"] .glm,
.glm[data-fonts="humanist"] {
  --glm-font-display: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --glm-font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

/* 16. Brutalist — Be Vietnam Pro + Overpass */
[data-fonts="brutalist"],
[data-fonts="brutalist"] .glm,
.glm[data-fonts="brutalist"] {
  --glm-font-display: 'Be Vietnam Pro', system-ui, sans-serif;
  --glm-font-body: 'Overpass', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
   CORE TOKENS (shared across all ambiences)
   --------------------------------------------------------------------------- */
:root,
.glm {
  /* Palette — anchors */
  --glm-cobalt: #0055FF;
  --glm-ranger: #00177D;
  --glm-coral: #FF7A2F;
  --glm-violet: #7C5CFC;

  /* Typography — families */
  --glm-font-display: 'Outfit', system-ui, sans-serif;
  --glm-font-body: 'DM Sans', system-ui, sans-serif;

  /* Typography — scale */
  --glm-fs-hero:     clamp(2.5rem, 5vw, 4.5rem);
  --glm-fs-display:  clamp(2rem, 3.5vw, 3.25rem);
  --glm-fs-heading:  clamp(1.5rem, 2.5vw, 2.25rem);
  --glm-fs-title:    clamp(1.125rem, 1.5vw, 1.5rem);
  --glm-fs-subtitle: 1.125rem;
  --glm-fs-body:     1rem;
  --glm-fs-small:    0.875rem;
  --glm-fs-xs:       0.75rem;

  /* Typography — weights */
  --glm-weight-light:    300;
  --glm-weight-regular:  400;
  --glm-weight-medium:   500;
  --glm-weight-semibold: 600;
  --glm-weight-bold:     700;
  --glm-weight-extrabold: 800;

  /* Typography — tracking */
  --glm-tracking-tight:  -0.02em;
  --glm-tracking-normal: 0;
  --glm-tracking-wide:   0.04em;
  --glm-tracking-caps:   0.08em;

  /* Typography — line heights */
  --glm-lh-display: 1.1;
  --glm-lh-heading: 1.2;
  --glm-lh-body:    1.6;
  --glm-lh-tight:   1.3;

  /* Shape — generous, organic, floating */
  --glm-radius-xs:   6px;
  --glm-radius-sm:   10px;
  --glm-radius-md:   14px;
  --glm-radius-lg:   20px;
  --glm-radius-xl:   28px;
  --glm-radius-2xl:  36px;
  --glm-radius-pill: 9999px;

  /* Spacing */
  --glm-space-2xs: 0.25rem;
  --glm-space-xs:  0.5rem;
  --glm-space-sm:  0.75rem;
  --glm-space-md:  1rem;
  --glm-space-lg:  1.5rem;
  --glm-space-xl:  2rem;
  --glm-space-2xl: 3rem;
  --glm-space-3xl: 4rem;
  --glm-space-4xl: 6rem;

  /* Status */
  --glm-success: #22C55E;
  --glm-warning: #F59E0B;
  --glm-error:   #EF4444;
  --glm-info:    var(--glm-cobalt);

  /* State layers (M3 pattern) */
  --glm-state-hover:   0.06;
  --glm-state-focus:   0.10;
  --glm-state-pressed: 0.12;
  --glm-state-dragged: 0.16;
}


/* =============================================================================
   AMBIENCE: MORNING (default light)
   Crisp, energized, productive. Clean daylight.
   ============================================================================= */
:root,
.glm,
[data-ambience="morning"] {
  /* Color roles */
  --glm-primary:              #0055FF;
  --glm-primary-hover:        #0048D9;
  --glm-primary-container:    #DBEAFF;
  --glm-on-primary:           #FFFFFF;
  --glm-on-primary-container: #001A4D;

  --glm-secondary:              #FF7A2F;
  --glm-secondary-container:    #FFEAD9;
  --glm-on-secondary:           #FFFFFF;
  --glm-on-secondary-container: #4D2000;

  --glm-tertiary:              #7C5CFC;
  --glm-tertiary-container:    #EDE8FF;
  --glm-on-tertiary:           #FFFFFF;
  --glm-on-tertiary-container: #1E0066;

  /* Surfaces — tonal elevation (M3 pattern) */
  --glm-surface-lowest:  #FFFFFF;
  --glm-surface-low:     #F8F9FC;
  --glm-surface:         #F2F4F8;
  --glm-surface-high:    #EAECF2;
  --glm-surface-highest: #E2E4EB;

  --glm-on-surface:         #111827;
  --glm-on-surface-variant:  #374151;
  --glm-on-surface-muted:   #6B7280;

  /* Borders */
  --glm-border:        #E5E7EB;
  --glm-border-strong: #D1D5DB;

  /* Shadows — clean daylight, cool neutral */
  --glm-shadow-color: 40, 50, 80;
  --glm-shadow-1: 0 1px 3px rgba(var(--glm-shadow-color), 0.08), 0 1px 2px rgba(var(--glm-shadow-color), 0.06);
  --glm-shadow-2: 0 2px 8px rgba(var(--glm-shadow-color), 0.10), 0 1px 3px rgba(var(--glm-shadow-color), 0.06);
  --glm-shadow-3: 0 6px 16px rgba(var(--glm-shadow-color), 0.12), 0 2px 6px rgba(var(--glm-shadow-color), 0.06);
  --glm-shadow-4: 0 10px 30px rgba(var(--glm-shadow-color), 0.14), 0 4px 10px rgba(var(--glm-shadow-color), 0.06);
  --glm-shadow-5: 0 16px 48px rgba(var(--glm-shadow-color), 0.16), 0 6px 16px rgba(var(--glm-shadow-color), 0.06);

  /* Ambient glow */
  --glm-glow: none;
  --glm-glow-color: transparent;
  --glm-glow-spread: 0px;

  /* Motion — crisp spring, moderate overshoot */
  --glm-ease:        cubic-bezier(0.34, 1.4, 0.64, 1);
  --glm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glm-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --glm-ease-in:     cubic-bezier(0.5, 0, 0.8, 0.15);
  --glm-duration-fast:  150ms;
  --glm-duration-base:  250ms;
  --glm-duration-slow:  400ms;
  --glm-duration-enter: 350ms;

  /* Vivid interactive fills */
  --glm-primary-vivid: rgba(0, 85, 255, 0.12);
  --glm-primary-vivid-hover: rgba(0, 85, 255, 0.20);

  /* Ambience meta */
  --glm-ambience-bg: #F2F4F8;
}


/* =============================================================================
   AMBIENCE: DAWN
   Warm cream, peach-white, blush. Gentle, hopeful, quiet.
   ============================================================================= */
[data-ambience="dawn"] {
  --glm-primary:              #0055FF;
  --glm-primary-hover:        #0048D9;
  --glm-primary-container:    #E3D9FF;
  --glm-on-primary:           #FFFFFF;
  --glm-on-primary-container: #0A1A4D;

  --glm-secondary:              #E8854A;
  --glm-secondary-container:    #FFF0E5;
  --glm-on-secondary:           #FFFFFF;
  --glm-on-secondary-container: #4D2800;

  --glm-tertiary:              #9C7CDB;
  --glm-tertiary-container:    #F3EDFF;
  --glm-on-tertiary:           #FFFFFF;
  --glm-on-tertiary-container: #2A1055;

  /* Surfaces — warm cream, peach undertones */
  --glm-surface-lowest:  #FFFBF7;
  --glm-surface-low:     #FFF6EF;
  --glm-surface:         #FFF1E8;
  --glm-surface-high:    #FFE9DA;
  --glm-surface-highest: #FFDFC9;

  --glm-on-surface:         #1F1610;
  --glm-on-surface-variant:  #54453A;
  --glm-on-surface-muted:   #7D6B5A;

  --glm-border:        #F0DFD0;
  --glm-border-strong: #E0C8B2;

  /* Shadows — soft golden, diffused, wide spread */
  --glm-shadow-color: 180, 100, 60;
  --glm-shadow-1: 0 2px 6px rgba(var(--glm-shadow-color), 0.06), 0 1px 3px rgba(var(--glm-shadow-color), 0.04);
  --glm-shadow-2: 0 4px 12px rgba(var(--glm-shadow-color), 0.08), 0 2px 4px rgba(var(--glm-shadow-color), 0.04);
  --glm-shadow-3: 0 8px 24px rgba(var(--glm-shadow-color), 0.10), 0 3px 8px rgba(var(--glm-shadow-color), 0.04);
  --glm-shadow-4: 0 14px 36px rgba(var(--glm-shadow-color), 0.12), 0 6px 12px rgba(var(--glm-shadow-color), 0.04);
  --glm-shadow-5: 0 20px 56px rgba(var(--glm-shadow-color), 0.14), 0 8px 20px rgba(var(--glm-shadow-color), 0.04);

  /* Ambient glow — faint warm radial on elevated elements */
  --glm-glow: 0 0 var(--glm-glow-spread) var(--glm-glow-color);
  --glm-glow-color: rgba(255, 180, 100, 0.08);
  --glm-glow-spread: 40px;

  /* Motion — slow, gentle, things emerge like fog lifting */
  --glm-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --glm-ease-spring: cubic-bezier(0.16, 1.1, 0.3, 1);
  --glm-ease-out:    cubic-bezier(0.05, 0.7, 0.1, 1);
  --glm-ease-in:     cubic-bezier(0.4, 0, 0.6, 0.1);
  --glm-duration-fast:  250ms;
  --glm-duration-base:  400ms;
  --glm-duration-slow:  700ms;
  --glm-duration-enter: 600ms;

  /* Vivid interactive fills */
  --glm-primary-vivid: rgba(0, 85, 255, 0.10);
  --glm-primary-vivid-hover: rgba(0, 85, 255, 0.18);

  --glm-ambience-bg: #FFF1E8;
}


/* =============================================================================
   AMBIENCE: DUSK
   Soft lavender-gray, muted violet undertones. Calm, contemplative.
   ============================================================================= */
[data-ambience="dusk"] {
  --glm-primary:              #4D7AFF;
  --glm-primary-hover:        #3D66E0;
  --glm-primary-container:    #E0DAFF;
  --glm-on-primary:           #FFFFFF;
  --glm-on-primary-container: #0D1040;

  --glm-secondary:              #C4845C;
  --glm-secondary-container:    #F5E6D9;
  --glm-on-secondary:           #FFFFFF;
  --glm-on-secondary-container: #3D2210;

  --glm-tertiary:              #9B7ED8;
  --glm-tertiary-container:    #EDE5FF;
  --glm-on-tertiary:           #FFFFFF;
  --glm-on-tertiary-container: #200D4D;

  /* Surfaces — lavender-gray, violet undertones */
  --glm-surface-lowest:  #F8F5FC;
  --glm-surface-low:     #F1ECF8;
  --glm-surface:         #EAE4F3;
  --glm-surface-high:    #E0D9ED;
  --glm-surface-highest: #D6CFE5;

  --glm-on-surface:         #1C1828;
  --glm-on-surface-variant:  #443D58;
  --glm-on-surface-muted:   #6E6785;

  --glm-border:        #D8D0E8;
  --glm-border-strong: #C4BBD8;

  /* Shadows — violet-tinted, longer, stretching */
  --glm-shadow-color: 100, 60, 140;
  --glm-shadow-1: 0 2px 5px rgba(var(--glm-shadow-color), 0.08), 0 1px 3px rgba(var(--glm-shadow-color), 0.05);
  --glm-shadow-2: 0 4px 12px rgba(var(--glm-shadow-color), 0.10), 0 2px 5px rgba(var(--glm-shadow-color), 0.05);
  --glm-shadow-3: 0 8px 24px rgba(var(--glm-shadow-color), 0.13), 0 3px 8px rgba(var(--glm-shadow-color), 0.05);
  --glm-shadow-4: 0 14px 40px rgba(var(--glm-shadow-color), 0.15), 0 6px 14px rgba(var(--glm-shadow-color), 0.05);
  --glm-shadow-5: 0 22px 60px rgba(var(--glm-shadow-color), 0.18), 0 8px 20px rgba(var(--glm-shadow-color), 0.05);

  /* Ambient glow — subtle warm-purple edge glow */
  --glm-glow: 0 0 var(--glm-glow-spread) var(--glm-glow-color);
  --glm-glow-color: rgba(140, 100, 200, 0.07);
  --glm-glow-spread: 30px;

  /* Motion — smooth, weighted, settling */
  --glm-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --glm-ease-spring: cubic-bezier(0.3, 1.2, 0.5, 1);
  --glm-ease-out:    cubic-bezier(0.1, 0.8, 0.2, 1);
  --glm-ease-in:     cubic-bezier(0.5, 0, 0.7, 0.2);
  --glm-duration-fast:  200ms;
  --glm-duration-base:  350ms;
  --glm-duration-slow:  550ms;
  --glm-duration-enter: 500ms;

  /* Vivid interactive fills */
  --glm-primary-vivid: rgba(77, 122, 255, 0.14);
  --glm-primary-vivid-hover: rgba(77, 122, 255, 0.22);

  --glm-ambience-bg: #EAE4F3;
}


/* =============================================================================
   AMBIENCE: OCEANIC
   Pale aqua, cool white, seafoam. Deep focus, calm but alert.
   ============================================================================= */
[data-ambience="oceanic"] {
  --glm-primary:              #0060E0;
  --glm-primary-hover:        #0050BF;
  --glm-primary-container:    #D4EDFF;
  --glm-on-primary:           #FFFFFF;
  --glm-on-primary-container: #001E4D;

  --glm-secondary:              #2BA89E;
  --glm-secondary-container:    #D5F5F2;
  --glm-on-secondary:           #FFFFFF;
  --glm-on-secondary-container: #0A3D38;

  --glm-tertiary:              #5B8CCC;
  --glm-tertiary-container:    #DCE9F8;
  --glm-on-tertiary:           #FFFFFF;
  --glm-on-tertiary-container: #0D2844;

  /* Surfaces — pale aqua, seafoam layers */
  --glm-surface-lowest:  #F7FCFD;
  --glm-surface-low:     #EFF8FA;
  --glm-surface:         #E6F3F7;
  --glm-surface-high:    #DAE9EF;
  --glm-surface-highest: #CEDFE6;

  --glm-on-surface:         #0F1C22;
  --glm-on-surface-variant:  #2D4A56;
  --glm-on-surface-muted:   #587882;

  --glm-border:        #CCE2EA;
  --glm-border-strong: #ADD0DC;

  /* Shadows — blue-teal, smooth depth like looking through water */
  --glm-shadow-color: 20, 80, 120;
  --glm-shadow-1: 0 2px 5px rgba(var(--glm-shadow-color), 0.07), 0 1px 2px rgba(var(--glm-shadow-color), 0.05);
  --glm-shadow-2: 0 3px 10px rgba(var(--glm-shadow-color), 0.09), 0 2px 4px rgba(var(--glm-shadow-color), 0.05);
  --glm-shadow-3: 0 6px 20px rgba(var(--glm-shadow-color), 0.11), 0 3px 8px rgba(var(--glm-shadow-color), 0.05);
  --glm-shadow-4: 0 12px 36px rgba(var(--glm-shadow-color), 0.13), 0 5px 12px rgba(var(--glm-shadow-color), 0.05);
  --glm-shadow-5: 0 18px 52px rgba(var(--glm-shadow-color), 0.15), 0 7px 18px rgba(var(--glm-shadow-color), 0.05);

  /* Ambient glow — faint caustic shimmer */
  --glm-glow: 0 0 var(--glm-glow-spread) var(--glm-glow-color);
  --glm-glow-color: rgba(60, 180, 200, 0.06);
  --glm-glow-spread: 35px;

  /* Motion — fluid, wave-like, slight sway and overshoot */
  --glm-ease:        cubic-bezier(0.25, 1.2, 0.5, 1);
  --glm-ease-spring: cubic-bezier(0.25, 1.4, 0.5, 1);
  --glm-ease-out:    cubic-bezier(0.1, 0.9, 0.3, 1);
  --glm-ease-in:     cubic-bezier(0.4, 0, 0.6, 0.1);
  --glm-duration-fast:  200ms;
  --glm-duration-base:  350ms;
  --glm-duration-slow:  500ms;
  --glm-duration-enter: 450ms;

  /* Vivid interactive fills */
  --glm-primary-vivid: rgba(0, 96, 224, 0.12);
  --glm-primary-vivid-hover: rgba(0, 96, 224, 0.20);

  --glm-ambience-bg: #E6F3F7;
}


/* =============================================================================
   AMBIENCE: MOONLIT (default dark)
   Deep blue-gray, silver light. Serene, focused. Night without harshness.
   ============================================================================= */
[data-ambience="moonlit"] {
  --glm-primary:              #6B9FFF;
  --glm-primary-hover:        #8BB4FF;
  --glm-primary-container:    #0A2E6B;
  --glm-on-primary:           #FFFFFF;
  --glm-on-primary-container: #C5DBFF;

  --glm-secondary:              #FFB088;
  --glm-secondary-container:    #4D2A14;
  --glm-on-secondary:           #1A0A00;
  --glm-on-secondary-container: #FFD9C4;

  --glm-tertiary:              #B8A0F0;
  --glm-tertiary-container:    #2D1D5C;
  --glm-on-tertiary:           #1A0840;
  --glm-on-tertiary-container: #DFD2FF;

  /* Surfaces — deep blue-gray, warm undertone, never pure black */
  --glm-surface-lowest:  #0C1018;
  --glm-surface-low:     #121822;
  --glm-surface:         #18202D;
  --glm-surface-high:    #212A38;
  --glm-surface-highest: #2C3545;

  --glm-on-surface:         #E2E8F0;
  --glm-on-surface-variant:  #A8B5C8;
  --glm-on-surface-muted:   #7B8DA3;

  --glm-border:        #2E3A4C;
  --glm-border-strong: #3E4D63;

  /* Shadows — minimal spread, tight, deep blue-black */
  --glm-shadow-color: 0, 10, 40;
  --glm-shadow-1: 0 1px 3px rgba(var(--glm-shadow-color), 0.20), 0 1px 2px rgba(var(--glm-shadow-color), 0.15);
  --glm-shadow-2: 0 2px 8px rgba(var(--glm-shadow-color), 0.24), 0 1px 3px rgba(var(--glm-shadow-color), 0.15);
  --glm-shadow-3: 0 5px 16px rgba(var(--glm-shadow-color), 0.28), 0 2px 6px rgba(var(--glm-shadow-color), 0.15);
  --glm-shadow-4: 0 10px 28px rgba(var(--glm-shadow-color), 0.32), 0 4px 10px rgba(var(--glm-shadow-color), 0.15);
  --glm-shadow-5: 0 16px 44px rgba(var(--glm-shadow-color), 0.36), 0 6px 16px rgba(var(--glm-shadow-color), 0.15);

  /* Ambient glow — faint cool luminescence on active elements */
  --glm-glow: 0 0 var(--glm-glow-spread) var(--glm-glow-color);
  --glm-glow-color: rgba(100, 160, 255, 0.08);
  --glm-glow-spread: 24px;

  /* Motion — quick but soft, precise, minimal */
  --glm-ease:        cubic-bezier(0.2, 0, 0, 1);
  --glm-ease-spring: cubic-bezier(0.2, 1.1, 0.4, 1);
  --glm-ease-out:    cubic-bezier(0.1, 0.8, 0.2, 1);
  --glm-ease-in:     cubic-bezier(0.5, 0, 0.8, 0.15);
  --glm-duration-fast:  120ms;
  --glm-duration-base:  200ms;
  --glm-duration-slow:  350ms;
  --glm-duration-enter: 280ms;

  /* Vivid interactive fills */
  --glm-primary-vivid: rgba(107, 159, 255, 0.16);
  --glm-primary-vivid-hover: rgba(107, 159, 255, 0.25);

  --glm-ambience-bg: #18202D;
}


/* =============================================================================
   AMBIENCE: AURORA (signature)
   Prismatic light, wonder, the most "optimistic futurism" of all.
   ============================================================================= */
[data-ambience="aurora"] {
  --glm-primary:              #0055FF;
  --glm-primary-hover:        #3D72FF;
  --glm-primary-container:    #E0ECFF;
  --glm-on-primary:           #FFFFFF;
  --glm-on-primary-container: #001244;

  --glm-secondary:              #D95CBA;
  --glm-secondary-container:    #FFEAF5;
  --glm-on-secondary:           #FFFFFF;
  --glm-on-secondary-container: #44102E;

  --glm-tertiary:              #22BBAA;
  --glm-tertiary-container:    #D4FFF8;
  --glm-on-tertiary:           #FFFFFF;
  --glm-on-tertiary-container: #0A3D36;

  /* Surfaces — cool white with faint prismatic shimmer */
  --glm-surface-lowest:  #FFFFFF;
  --glm-surface-low:     #F6F8FF;
  --glm-surface:         #F0F4FF;
  --glm-surface-high:    #E8EDFC;
  --glm-surface-highest: #DFE5F8;

  --glm-on-surface:         #111430;
  --glm-on-surface-variant:  #383C58;
  --glm-on-surface-muted:   #656A85;

  --glm-border:        #D8DDF0;
  --glm-border-strong: #C0C8E2;

  /* Shadows — multi-layered prismatic, subtle hue-shifted stacks */
  --glm-shadow-color: 60, 40, 120;
  --glm-shadow-1: 0 1px 4px rgba(60, 40, 120, 0.06), 0 1px 3px rgba(0, 85, 255, 0.04);
  --glm-shadow-2: 0 3px 10px rgba(60, 40, 120, 0.08), 0 2px 6px rgba(0, 85, 255, 0.04), 0 1px 4px rgba(120, 40, 100, 0.03);
  --glm-shadow-3: 0 6px 20px rgba(60, 40, 120, 0.10), 0 4px 10px rgba(0, 85, 255, 0.05), 0 2px 8px rgba(120, 40, 100, 0.04);
  --glm-shadow-4: 0 12px 36px rgba(60, 40, 120, 0.12), 0 6px 16px rgba(0, 85, 255, 0.06), 0 4px 12px rgba(120, 40, 100, 0.04);
  --glm-shadow-5: 0 20px 52px rgba(60, 40, 120, 0.14), 0 8px 24px rgba(0, 85, 255, 0.07), 0 6px 16px rgba(120, 40, 100, 0.05);

  /* Ambient glow — animated prismatic glow */
  --glm-glow: 0 0 var(--glm-glow-spread) var(--glm-glow-color);
  --glm-glow-color: rgba(80, 60, 220, 0.08);
  --glm-glow-spread: 48px;

  /* Motion — playful, elastic, alive. Strongest overshoot. */
  --glm-ease:        cubic-bezier(0.34, 1.8, 0.64, 1);
  --glm-ease-spring: cubic-bezier(0.22, 2.0, 0.5, 1);
  --glm-ease-out:    cubic-bezier(0.05, 0.9, 0.1, 1);
  --glm-ease-in:     cubic-bezier(0.6, 0, 0.7, 0.2);
  --glm-duration-fast:  180ms;
  --glm-duration-base:  300ms;
  --glm-duration-slow:  500ms;
  --glm-duration-enter: 400ms;

  /* Vivid interactive fills */
  --glm-primary-vivid: rgba(0, 85, 255, 0.13);
  --glm-primary-vivid-hover: rgba(0, 85, 255, 0.21);

  --glm-ambience-bg: #F0F4FF;
}


/* =============================================================================
   AURORA — PRISMATIC ANIMATION
   Subtle hue-shifting glow that slowly cycles. The signature effect.
   ============================================================================= */
@keyframes glm-aurora-glow {
  0%   { --glm-glow-color: rgba(80, 60, 220, 0.08); }
  33%  { --glm-glow-color: rgba(0, 120, 255, 0.08); }
  66%  { --glm-glow-color: rgba(180, 60, 160, 0.08); }
  100% { --glm-glow-color: rgba(80, 60, 220, 0.08); }
}

@keyframes glm-aurora-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[data-ambience="aurora"] .glm-card,
[data-ambience="aurora"] .glm-aurora-glow {
  animation: glm-aurora-glow 20s ease infinite;
}


/* =============================================================================
   OCEANIC — CAUSTIC SHIMMER
   Barely perceptible drift on floating elements.
   ============================================================================= */
@keyframes glm-oceanic-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

[data-ambience="oceanic"] .glm-card {
  animation: glm-oceanic-drift 6s var(--glm-ease) infinite;
}


/* =============================================================================
   AMBIENCE TRANSITION
   Smooth crossfade when switching ambiences.
   ============================================================================= */
[data-ambience] {
  transition:
    background-color 800ms cubic-bezier(0.4, 0, 0.2, 1),
    color 600ms cubic-bezier(0.4, 0, 0.2, 1);
}