:root {

  
  --z-pill:     6px;
  --z-chip:     8px;
  --z-dot:      8px;
  --z-button:   12px;
  --z-toggle:   12px;
  --z-menu:     16px;
  --z-dropdown: 16px;
  --z-widget:   20px;
  --z-card:     24px;
  --z-lens:     40px;

  
  --push-travel: 6px;
  --push-dur:    120ms;
  --push-ease:   cubic-bezier(.2,.8,.2,1);
  --push-scale:  0.985;

  
  --bevel-light: rgba(240,235,216,0.18);   
  --bevel-dark:  rgba(0,0,0,0.45);
  --bevel-rim:   var(--gold-soft);         

  
  --press-shadow-rest: 0 12px 24px rgba(0,0,0,0.45);
  --press-shadow-down: 0 3px 8px  rgba(0,0,0,0.55);
  --press-glow:        0 0 0 1px var(--bevel-rim);
  --haptic:            light;

  
  --glass-fill-min: 0.06;
  --glass-fill-max: 0.16;
  --label-bright:   var(--sun);            
  --lens-bg:        rgba(13,24,41,0.10);   
  --lens-blur:      18px;

  
  --btn-approve-bg: rgba(213,179,84,0.14);
  --btn-action-bg:  rgba(27,53,90,0.30);
  --btn-alert-bg:   rgba(52,22,34,0.30);
  --btn-muted-bg:   rgba(22,30,41,0.24);
  --btn-room-bg:    rgba(27,53,90,0.22);
  --btn-build-bg:   rgba(43,230,230,0.14); 
  --btn-white-bg:   rgba(255,246,230,0.10);
  --btn-label:      var(--label-bright);

  
  --card-perspective: 1400px;
  --card-tilt-x:      3deg;
  --card-tilt-y:      -6deg;
  --card-depth:       24px;
  --card-glass-bg:    rgba(11,21,36,0.06);
  --card-glass-blur:  14px;
  --card-edge:        var(--gold-soft);    
  --card-edge-width:  1px;
  --card-inner-glow:  inset 0 1px 0 rgba(240,235,216,0.10); 

  
  --beam-color-core: rgba(230,198,135,0.85);  
  --beam-color-edge: rgba(230,198,135,0.04);  
  --beam-spread:     18deg;
  --beam-origin:     planet;

  
  --comet-glow-radius: 220px;
  --trail-blend:       screen;
  --proximity-radius:  340px;
  --proximity-lift:    0.45;
  --flashlight-cone:   42deg;
  --flashlight-reach:  520px;
  --flashlight-tint:   rgba(255,246,230,0.22);

  
  --L-multiverse: #cfe8f2;
  --L-galaxy:     #3de0e6;
  --L-mission:    #7cf0a8;
  --L-folder:     #ffcc66;
  --L-artifact:   #ff9e5e;
  --L-component:  #8fb7ff;
  --L-element:    #c3c9de;
  --L-detail:     var(--L-element);
  --L-world:      var(--L-galaxy);

  
  --planet-atmosphere: rgba(61,224,230,0.18);
  --planet-rim:        var(--L-galaxy);
  --active-scale:      3;
}


.pushable {
  transform: perspective(var(--card-perspective,1400px)) translateZ(var(--rest-z,12px));
  box-shadow:
    inset 0 1px 0 var(--bevel-light),
    inset 0 -2px 0 var(--bevel-dark),
    var(--press-shadow-rest);
  transition: transform var(--push-dur) var(--push-ease),
              box-shadow var(--push-dur) var(--push-ease);
  will-change: transform, box-shadow;
}
.pushable:active {
  transform: perspective(var(--card-perspective,1400px))
             translateZ(calc(var(--rest-z,12px) - var(--push-travel)))
             scale(var(--push-scale));
  box-shadow:
    inset 0 1px 0 var(--bevel-light),
    inset 0 -1px 0 var(--bevel-dark),
    var(--press-shadow-down);
}


.pill{--rest-z:var(--z-pill);}    .chip{--rest-z:var(--z-chip);}
.btn{--rest-z:var(--z-button);}   .toggle{--rest-z:var(--z-toggle);}
.menu-item{--rest-z:var(--z-menu);} .dropdown{--rest-z:var(--z-dropdown);}
.widget{--rest-z:var(--z-widget);}  .card{--rest-z:var(--z-card);}
.lens{--rest-z:var(--z-lens);}