/* Depth: raised keys that press down, icons that lift, windows and cards with layered light and shadow.
   Loaded after every other stylesheet. "html:root" outranks the flat rules without !important.
   Colors come from the tokens below, set per look, so text contrast is unchanged: only light and shadow are added. */
:root{
  --hi:rgba(255,255,255,.78);        /* top light on raised surfaces */
  --lo:rgba(23,25,27,.10);           /* bottom shade inside a surface */
  --edge:var(--line);                /* the solid underside of a key */
  --edge-soft:rgba(23,25,27,.22);    /* the underside of cards and windows */
  --amb:rgba(23,25,27,.30);          /* far, soft shadow */
  --amb2:rgba(23,25,27,.14);         /* near shadow */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --hi:rgba(255,255,255,.10); --lo:rgba(0,0,0,.35); --edge:#050606; --edge-soft:rgba(0,0,0,.65); --amb:rgba(0,0,0,.75); --amb2:rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --hi:rgba(255,255,255,.10); --lo:rgba(0,0,0,.35); --edge:#050606; --edge-soft:rgba(0,0,0,.65); --amb:rgba(0,0,0,.75); --amb2:rgba(0,0,0,.45);
}

/* keys: buttons, the look switch, dock tabs, viewer and title-bar boxes */
html:root .btn,html:root .intro-look button,html:root .dock .tab,html:root .viewer-bar button{
  background-image:linear-gradient(180deg,var(--hi),rgba(255,255,255,0) 60%);
  box-shadow:inset 0 1px 0 var(--hi),inset 0 -2px 0 var(--lo),0 3px 0 var(--edge),0 7px 14px -6px var(--amb);
  transform:translateY(0);
  transition:transform 110ms var(--ease),box-shadow 110ms var(--ease),background-color var(--fast);
}
html:root .intro-look button,html:root .dock .tab,html:root .viewer-bar button{box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--lo),0 2px 0 var(--edge),0 4px 8px -4px var(--amb)}
html:root .menubar .btn.small,html:root .login-pin .btn{box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--lo),0 2px 0 var(--edge)}
html:root .btn:active,html:root .intro-look button:active,html:root .dock .tab:active,html:root .viewer-bar button:active,
html:root .menubar .btn.small:active,html:root .login-pin .btn:active{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 var(--hi),inset 0 2px 5px var(--lo),0 0 0 var(--edge),0 1px 3px -1px var(--amb);
}
html:root .btn.primary{background-image:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 65%)}

html:root .win .tb .box{box-shadow:inset 0 1px 0 var(--hi),0 1px 0 var(--edge);transition:transform 90ms var(--ease)}
html:root .win .tb .box:active{transform:translateY(1px);box-shadow:inset 0 1px 2px var(--lo)}
@media (hover:hover){
  html:root .btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--hi),inset 0 -2px 0 var(--lo),0 4px 0 var(--edge),0 12px 20px -8px var(--amb)}
  html:root .btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 var(--hi),inset 0 2px 5px var(--lo),0 0 0 var(--edge),0 1px 3px -1px var(--amb)}
}

/* desktop icons: they sit on the desk with a shadow, lift under the pointer, press in when tapped */
html:root .icon svg{filter:drop-shadow(0 1px 0 var(--hi)) drop-shadow(0 2px 0 var(--edge-soft)) drop-shadow(0 7px 7px var(--amb2));transition:transform 140ms var(--ease),filter 140ms}
html:root .icon span{box-shadow:inset 0 1px 0 var(--hi),0 1px 2px var(--amb2)}
html:root .icon:active svg{transform:translateY(2px) scale(.93);filter:drop-shadow(0 1px 0 var(--edge-soft)) drop-shadow(0 2px 3px var(--amb2))}
@media (hover:hover){html:root .icon:hover svg{transform:translateY(-3px) scale(1.05);filter:drop-shadow(0 1px 0 var(--hi)) drop-shadow(0 4px 0 var(--edge-soft)) drop-shadow(0 12px 10px var(--amb2)) drop-shadow(0 0 10px var(--lime-soft))}}

/* windows: layered shadows; the front window floats higher; a lit title bar */
html:root .win{box-shadow:inset 0 1px 0 var(--hi),0 2px 0 var(--edge-soft),0 14px 24px -12px var(--amb2),0 34px 64px -26px var(--amb)}
html:root .win.active{box-shadow:inset 0 1px 0 var(--hi),0 3px 0 var(--edge-soft),0 22px 34px -14px var(--amb2),0 54px 96px -30px var(--amb)}

html:root .win .tb{box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--lo)}
html:root body.phone .win,html:root body.phone .win.active{box-shadow:inset 0 1px 0 var(--hi),0 -1px 0 var(--edge-soft)}
/* windows swing up into place (same name as desk.css, so the flat version is replaced; reduced motion still turns it off) */
@keyframes win-open{from{opacity:0;transform:perspective(1200px) rotateX(9deg) translateY(14px) scale(.96)}}

/* cards, pricing tiers, menus, the dock, the welcome note, the top bar */
html:root .card{box-shadow:inset 0 1px 0 var(--hi),0 2px 0 var(--edge-soft),0 12px 22px -14px var(--amb)}
html:root .tier{box-shadow:inset 0 1px 0 var(--hi),0 3px 0 var(--edge-soft),0 16px 30px -16px var(--amb2),0 34px 60px -30px var(--amb);transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
@media (hover:hover){html:root .tier:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 var(--hi),0 4px 0 var(--edge-soft),0 22px 36px -16px var(--amb2),0 46px 72px -30px var(--amb)}}
html:root .menu{box-shadow:inset 0 1px 0 var(--hi),0 2px 0 var(--edge-soft),0 18px 34px -12px var(--amb)}
html:root .dock{box-shadow:inset 0 1px 0 var(--hi),0 2px 0 var(--edge-soft),0 16px 30px -12px var(--amb)}
html:root .intro-note{box-shadow:inset 0 1px 0 var(--hi),0 3px 0 var(--edge-soft),0 24px 40px -16px var(--amb2),0 50px 90px -30px var(--amb)}
html:root .menubar{box-shadow:inset 0 1px 0 var(--hi),0 4px 12px -8px var(--amb)}

@media (prefers-reduced-motion:reduce){
  html:root .btn,html:root .icon svg,html:root .tier,html:root .intro-look button,html:root .dock .tab{transition:none}
  html:root .tier:hover{transform:none}
  html:root .icon:hover svg,html:root .icon:active svg{transform:none}  /* icons: shadow and glow may change, nothing moves */
}